Question

在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 bootstrap和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>

Answer 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中之前，请考虑一下这样一个事实，即您很可能最终不得不重做很多样式。

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

1 个答案: