如何隐藏边框下方的背景

Question

我需要修改网站，以便为移动设备增加所有链接的可点击区域。我为所有链接指定了相同大小的透明border和负margin，以免影响文本流。现在这就像一个魅力。但不是具有背景的元素。背景展开到透明边框。这是行为接缝在所有浏览器中保持一致。

http://jsfiddle.net/hq65C/1/这里有另一个例子：http://jsfiddle.net/DytDA/

这是为什么？我总是认为边界不在元素之内。我怎么能解决这个问题。 （我需要一个不需要修改HTML的解决方案）。

Answer 1

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

<强> Demo

Answer 2

我认为如果边框位于元素之外，那么你背后的行为（单击边框表现为单击元素内部）将无法正常工作

如果不重复背景图像，则可以将背景位置x位置设置为与边框宽度相同的量。否则，您也可以尝试将border-color设置为与元素后面的颜色相同，但如果是图像，祝你好运

Answer 3

CSS background填充border的区域，border-color层叠在此区域。

由于您拥有透明的border，因此会在其后面显示background-color。

使用纯HTML / CSS，我不确定是否有解决方法。

这个jsFiddle阐述了这个：

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

Answer 4

试试这个：

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

注意：span表示具有其他样式的内联元素（其他CSS值）。另外一个会强制新块的div。