链接上的 IE 边距答案

【问题标题】：IE margin on link链接上的 IE 边距
【发布时间】：2012-07-04 16:32:06
【问题描述】：

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

【问题讨论】：

那么在 IE 中你得到的是一个 2px 的 div 太靠右了？
不，它的 2px 在 IE 中太低，但在 chrome 中正好。
你在使用 HTML5 Boilerplate html5boilerplate.com 吗？
你在 Safari 和 Firefox 中试过了吗？我知道 FF 的不同之处在于它会累积（optelt）边距和填充到 div 的宽度或高度，而其他浏览器则不会。不过，Chrome 现在也有可能做到这一点。

标签： html css internet-explorer

【解决方案1】：

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

【讨论】：

这是解决问题的一种方法，但我认为这是作弊。我没有足够的经验来说明这一点，但对我来说这似乎不是正确的做法。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

.vmCartModule .show_cart{ 显示：内联！重要；向左飘浮;左边距：10px； } .vmCartModule .show_cart a{ 垂直对齐：基线 }
确切的样式取决于外部布局。您实际上要对齐哪些元素？（为什么你们都用float？它的应用范围很窄，不应该用于其他样式可以实现的布局。）
我想将一个 div（里面有一个 img 和一些文本）与一个 div（里面有一个链接）垂直对齐，并且我希望这两个文本的高度相同。
那么你的两个 div 可能都有 "display: inline-block; vertical-align: baseline" (display:inline for ie7)。
做到了，但没有奏效。在 IE 中，链接文本现在比另一个 div 中的文本高 2px。