Ответ 1
Как насчет background-clip: padding-box;
?
Мне нужно изменить веб-сайт, чтобы сделать интерактивную зону всех ссылок больше для мобильных устройств. Я дал всем ссылкам прозрачный border
и отрицательный margin
того же размера, чтобы не влиять на поток текста. Теперь это работает как шарм. Но не на элементах, имеющих фон. Фон распространяется на прозрачную границу. Это поведение швов, чтобы быть последовательным среди всех браузеров.
http://jsfiddle.net/hq65C/1/ здесь другой пример: http://jsfiddle.net/DytDA/
Почему это? Я всегда думал, что граница вне элемента. Как я могу это исправить. (Мне нужно решение, которое не требует изменения HTML).
Как насчет background-clip: padding-box;
?
Я думаю, что если граница была вне элемента, то поведение, по которому вы находитесь (щелчок на границе ведет себя как щелчок внутри элемента), не будет работать
Если фоновое изображение не повторяется, вы можете установить положение x позиции фона на ту же величину, что и ширина вашей границы. Кроме того, вы также можете попробовать установить цвет границы таким же, как цвет за элементом, но если это изображение, удачи
CSS background
заполняет область border
слоем border-color
над этим.
Поскольку у вас есть прозрачный border
, он отображает background-color
позади него.
С помощью простого HTML/CSS я не уверен, что есть способ обойти это.
Этот jsFiddle демонстрирует это:
попробуйте следующее:
<a href="#"><span style="background: red">link</span></a> test test test <br/>
test test test
: span означает встроенный элемент с другим стилем (другие значения CSS). другой, что div, который заставит новый блок.