Как скрыть фон под границей

Мне нужно изменить веб-сайт, чтобы сделать интерактивную зону всех ссылок больше для мобильных устройств. Я дал всем ссылкам прозрачный border и отрицательный margin того же размера, чтобы не влиять на поток текста. Теперь это работает как шарм. Но не на элементах, имеющих фон. Фон распространяется на прозрачную границу. Это поведение швов, чтобы быть последовательным среди всех браузеров.

http://jsfiddle.net/hq65C/1/ здесь другой пример: http://jsfiddle.net/DytDA/

Почему это? Я всегда думал, что граница вне элемента. Как я могу это исправить. (Мне нужно решение, которое не требует изменения HTML).

Ответ 1

Как насчет background-clip: padding-box;?

Демо

Ответ 2

Я думаю, что если граница была вне элемента, то поведение, по которому вы находитесь (щелчок на границе ведет себя как щелчок внутри элемента), не будет работать

Если фоновое изображение не повторяется, вы можете установить положение x позиции фона на ту же величину, что и ширина вашей границы. Кроме того, вы также можете попробовать установить цвет границы таким же, как цвет за элементом, но если это изображение, удачи

Ответ 3

CSS background заполняет область border слоем border-color над этим.

Поскольку у вас есть прозрачный border, он отображает background-color позади него.

С помощью простого HTML/CSS я не уверен, что есть способ обойти это.

Этот jsFiddle демонстрирует это:

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

Ответ 4

попробуйте следующее:

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

: span означает встроенный элемент с другим стилем (другие значения CSS). другой, что div, который заставит новый блок.