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/ here a other example: http://jsfiddle.net/DytDA/
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).
How about
background-clip: padding-box;?Demo