css - :hover ignored over margin

Question

Strange hover problem in IE8 & 10, about which I can't find anything... Surely, I'm not the first to stumble upon it?

jsFiddle

HTML:
<a href="#"><img style="border:0" src="image.png">Text</a>

CSS:
a {border:1px solid silver}
a img {margin-right:30px}
a:hover {border:1px solid red}

In IE, when I hover the mouse over the image or the text, the border changes to red as expected, but when I move the mouse over the space caused by the margin-right, the border returns to gray.

In Firefox, the border always stays red wherever the mouse is over the <a>.

Since the problem is reproducible on jsFiddle, it's not caused by a bad <DOCTYPE>...

Answer 1

使用 display:inline-block; 在锚链接上或在图像上使用 padding-right 而不是边距，它将在 IE 中工作

Answer 2

替换margin为padding

a img {padding-right:30px}

Answer 3

有同样的问题，但已经在覆盖元素中使用了填充。设置background-image为不存在的文件 ( url(filedoesnotexist)) 或透明像素确实对我有用。