:hover 忽略边距答案

【问题标题】：:hover ignored over margin:hover 忽略边距
【发布时间】：2013-08-18 04:04:35
【问题描述】：

在 IE8 和 10 中出现奇怪的悬停问题，我找不到任何关于它的东西......当然，我不是第一个偶然发现它的人吗？

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}

在 IE 中，当我将鼠标悬停在图像或文本上时，边框会按预期变为红色，但是当我将鼠标移到由margin-right 引起的空间上时，边框会变为灰色。

在 Firefox 中，无论鼠标在<a> 上，边框始终保持红色。

由于问题在 jsFiddle 上可重现，因此不是由错误的 <DOCTYPE> 引起的...

【问题讨论】：

所以，是的，只需使用padding 而不是margin。不确定padding 在图像上是否有意义，但是嘿，我们在这里谈论的是 IE。仍然想知道为什么这个错误仍然在 IE10 中......

标签： css internet-explorer hover margin

【解决方案1】：

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

【讨论】：

【解决方案2】：

将margin 替换为padding

a img {padding-right:30px}

【讨论】：

【解决方案3】：

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

【讨论】：