如何隐藏边框下方的背景 [英] How to hide the background underneath the border

问题描述

我需要修改一个网站，以使移动设备的所有链接的可点击区域更大.我为所有链接设置了透明的border和大小相同的负数margin，以不影响文本流.现在，这就像一个魅力.但不适用于具有背景的元素.背景散布到透明边框.这是在所有浏览器之间保持一致的行为接缝.

I need to modify a website to make the clickable zone of all links bigger for mobile devices. I gave all links a transparent border and a negative margin of the same size, to not affect the text-flow. Now this works like a charm. But not on elements that have a background. The background spreads out to the transparent border. This is behaviour seams to be consistent among all browsers.

http://jsfiddle.net/hq65C/1/这里是另一个示例: http://jsfiddle.net/DytDA/

http://jsfiddle.net/hq65C/1/ here a other example: http://jsfiddle.net/DytDA/

这是为什么?我一直以为边界在元素之外.我该如何解决. (我需要一个不需要修改HTML的解决方案).

Why is this? I was always thinking that the border is outside of the element. How could I fix this. (I need a solution that does not require to modify the HTML).

推荐答案

background-clip: padding-box;怎么样?

演示

Demo

这篇关于如何隐藏边框下方的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！