0

我在 IE 中遇到了 margin-top 的问题。我给了一个链接一个 2px 的边距顶部，以便在 Chrome 中正确对齐它。但这在 IE9 中造成了偏移。

一些代码：

CSS

.show_cart{
    display: block!important;
    float:left;
    padding-left: 10px;
    margin-top: 2px;
}

HTML

<div class="show_cart">
    <a href="/reba/nl/winkelwagen">Toon Winkelwagen</a>
</div>

我希望有一个快速修复，但我找不到它。

编辑 - 对不起，我在这里编辑它，但我在评论框中找不到代码。无论如何，我根据我应该使用垂直对齐的答案将其更改为这个。Chrome 仍然可以正常显示，但在 IE 中，它现在与 TOP 相差 2px。

.vmCartModule .show_cart{
    display: inline!important;
    float:left;
    padding-left: 10px;
}

.vmCartModule .show_cart a{
    vertical-align: baseline
}
4

3 回答 3

1

它不仅仅是一个利润。当您尝试将元素与文本对齐时，您还应该考虑字体大小、垂直对齐等。我不建议计算像素，它永远不会在所有浏览器中保持一致并且很难维护。相反，尝试坚持“垂直对齐：基线”，这更具确定性。使用它，您可以确保您的文本始终正确对齐。

于 2012-07-04T08:13:36.607 回答
0

以防万一您使用的是 HTML5 Boilerplate http://html5boilerplate.com/

您可以为 IE9 的同一类使用不同的值 -

.ie9 .show_cart{
    margin-top: 0px;
}

或者仅当您希望为此使用 jQuery 时，您可以编写 -

if ($.browser.msie && parseInt($.browser.version) == 9){
  $('.show_cart').css({'margin-top':'0px'});
}
于 2012-07-04T08:05:22.937 回答
0

这听起来就像 IE 著名的双边距错误，这里有一个简单的修复方法。

尝试更改display: block;为display: inline;. 或者您可以找到另一个解决方案（有很多），或者您可以使用提到的 HTML5 样板或类似的东西，如headjs等。

于 2012-07-04T08:12:40.090 回答