:hover 忽略边距

Posted 2023-03-06

技术标签:

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

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

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

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

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

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

【问题讨论】：

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

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

【讨论】：

【参考方案2】：

将margin 替换为padding

a img padding-right:30px

【讨论】：

【参考方案3】：

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

【讨论】：

以上是关于:hover 忽略边距的主要内容，如果未能解决你的问题，请参考以下文章