Cómo ocultar el fondo debajo del borde

Question

Necesito modificar un sitio web para hacer que la zona clicable de todos los enlaces sea más grande para dispositivos móviles. Di todos los enlaces un border transparente y un margin negativo del mismo tamaño, para no afectar el flujo de texto. Ahora esto funciona como un encanto. Pero no en elementos que tienen un fondo. El fondo se extiende hasta el borde transparente. Esto es costumbres de ser consistente entre todos los navegadores.

http://jsfiddle.net/hq65C/1/ aquí otro ejemplo: http://jsfiddle.net/DytDA/

¿Por qué es esto? Siempre pensé que el borde está fuera del elemento. ¿Cómo podría arreglar esto? (Necesito una solución que no requiera modificar el HTML).

Answer 1

¿Qué tal background-clip: padding-box;?

Demo

Answer 2

Creo que si la frontera se encontraban fuera del elemento, el comportamiento que está detrás (que al hacer clic en la frontera se comporta como hacer clic en el interior del elemento) no funcionaría bien

si la imagen de fondo no se repite , puede establecer posición de fondo x posición en la misma cantidad que su ancho de borde. lo demás, también se puede intentar establecer la frontera-color al igual que el color detrás del elemento, pero si se trata de una imagen, buena suerte

Answer 3

CSS background llena el área de la border, con el border-color capas sobre esto.

Como tiene un border transparente, muestra el background-color detrás de él.

Con HTML/CSS sin formato, no estoy seguro de que haya una forma de evitar esto.

Este jsFiddle demostrates esto:

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

Answer 4

probar esto:

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

aviso: el lapso significa un elemento en línea con otro estilo (otros valores CSS). otra div que forzará un nuevo bloque.