在 IE11 中悬停时边距发生变化答案

【问题标题】：Margins changing on hover in IE11在 IE11 中悬停时边距发生变化
【发布时间】：2014-03-04 02:33:33
【问题描述】：

在 IE11 中查看 http://happyhourproductions.co.uk/tv-commercial-production.html 时，我遇到了一些边距问题。

在此页面右侧的“更多类似”部分下，如果您将鼠标悬停在前两个链接图像中的任何一个上，关联的边距似乎会发生变化。将光标移开不会将其变回，但将光标移到该列中的任何其他链接上会。

我认为可能是这个错误：http://haslayout.net/css/Percentage-Padding-Margin-Bug 但这些解决方案都不起作用。

我还发现这个问题可能也相同但没有任何解决方案：IE9 img hover add's margin to bottom

这是 CSS，它是使用 Twitter 引导程序和 LESS 构建的，如果这很重要？

.work .sidebar .morelikethis {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #FFFFFF;
    margin-bottom: 10.2564%;
    margin-top: 7.69231%;
    overflow: auto;
}

这里是 HTML

<h2>More like this...</h2>
<p>
<a class="morelikethis" title="DRTV Commercials" href="drtv-production-company.html">
</p>
<p>
<a class="morelikethis" title="Animation" href="animation-production.html">
</p>
<div class="newsflash">
<a href="/news/2013/05/happy-hour-productions-launches-new-quickquid-drtv-advertising-campaign/">
</div>

【问题讨论】：

这感觉像是一个 IE 错误，但您在这里使用百分比有什么特别的原因吗？每个w3.org 边距百分比是根据块的宽度计算的，即使对于边距顶部和底部也是如此。侧边栏的宽度似乎没有变化，那么为什么不设置固定边距呢？

标签： css internet-explorer

【解决方案1】：

您的问题是由 IE11 的默认 CSS 引起的。您可以通过将所有边距设置为“morelikethis”来解决此问题：

.morelikethis:hover {
    margin-left: some value;
    margin-right: some value;
    margin-bottom: 10.2564%;
    margin-top: 7.69231%;
}

缩短：

.morelikethis:hover {
    margin: top right bottom left;
}

另外，我建议使用 CSS 重置，这样浏览器的默认 CSS 就不会与样式混淆。这是一个很好的例子：https://code.google.com/p/reset5/ 在您的 CSS 中包含此脚本之前，请考虑这样一个事实，即您很可能最终不得不重做很多样式。

【讨论】：