透明边框扩展背景颜色/图像 [英] Transparent border expands background color/image

问题描述

我需要修改网站，使iPad的所有链接的可点击区域更大。
首先我认为这是一个容易的任务。我给所有链接一个透明边框和一个负边距，以便这个更改不会影响文本流。现在这工作像一个魅力。但不是有背景图像或颜色的链接。背景颜色/图像接缝扩展到透明边框。它接缝，所有浏览器在这种情况下的行为相同。

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

为什么？我一直认为边界在元素之外，你有任何想法，我可以解决这个问题，或者也许一个其他的解决方案（这不需要修改HTML）。

PS：只需要在webkit中工作。

解决方案

background-clip：padding-box; ？

隐藏

I need to modify a website to make the clickable zone of all links bigger for the iPad. First i was thinking this was a easy task. I gave all links a transparent border and a negative margin so that this change would not affect the textflow. Now this works like a charm. But not on links that have a background image nor color. The background color/image seams to spread out to the transparent border. It seams that all browser behave the same in this case.

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

Why is this? I was always thinking that the border is outside of the element and do you have any idea how i could fix this, or maybe a other solution (That does not require to modify the HTML).

PS: It only has to work in webkit.

解决方案

How about background-clip: padding-box;?

Demo

这篇关于透明边框扩展背景颜色/图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！