Come nascondere lo sfondo al di sotto del bordo

Question

Ho bisogno di modificare un sito Web per rendere la zona cliccabile di tutti i collegamenti più grande per i dispositivi mobili. Ho dato a tutti i collegamenti uno border trasparente e uno margin negativo della stessa dimensione, per non influire sul flusso del testo. Ora funziona come un fascino. Ma non su elementi che hanno uno sfondo. Lo sfondo si estende fino al bordo trasparente. Questo è un comportamento corretto per essere coerente tra tutti i browser.

http://jsfiddle.net/hq65C/1/ qui un altro esempio: http://jsfiddle.net/DytDA/

Perché è questo? Ho sempre pensato che il confine fosse al di fuori dell'elemento. Come potrei risolvere questo. (Ho bisogno di una soluzione che non richieda di modificare l'HTML).

Answer 1

Che ne dici di background-clip: padding-box;?

Demo

Answer 2

Penso che se il confine erano al di fuori l'elemento, il comportamento si è dietro (che cliccando sul confine si comporta come fare clic all'interno dell'elemento) non funziona nemmeno

se l'immagine di sfondo non è ripetuta , puoi impostare la posizione x della posizione dello sfondo alla stessa quantità della larghezza del bordo. altrimenti, si può anche provare a impostare il border-color per lo stesso del colore dietro l'elemento, ma se si tratta di un'immagine, buona fortuna

Answer 3

CSS background riempie l'area del border, con il border-color stratificazione su questo.

Come si dispone di un border trasparente, viene visualizzato il dietro di esso.

Con semplice HTML/CSS, non sono sicuro che ci sia un modo per aggirare questo.

Questo jsFiddle demostrates questo:

http://jsfiddle.net/hq65C/8/

Answer 4

provare questo:

<a href="#"><span style="background: red">link</span></a> test test test <br/> 
test test test 

avviso: la durata: un elemento in linea con un altro stile (CSS altri valori). altro div che costringerà un nuovo blocco.