Question

Goodmorning everyone，

我在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>

我希望有一个quickfix但我找不到它。

（对不起我的穷人）

编辑 - 抱歉我在这里编辑它但我在评论框中找不到代码。无论如何，我根据答案说明我应该使用垂直对齐来改变它。 Chrome仍在正常显示，但在IE中它现在已经以2px的速度向顶部显示。

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

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

Answer 1

它不仅仅是一个保证金。当您尝试使用文本排列元素时，还应考虑font-size，vertical-align等。我不建议计算像素，它永远不会在所有浏览器中保持一致，并且很难维护。相反，尝试坚持“垂直对齐：基线”，这是更确定的。使用它可以确保您的文本始终正确对齐。

Answer 2

以防您使用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'});
}

Answer 3

这听起来就像IE着名的双边缘错误，有一个简单的解决方法，如here所述。

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

链接上的IE边距

3 个答案: