Question

我的介绍照片略微覆盖了IE和Chrome上的面包屑面板，请点击此处https://www.hawaiidiscount.com/luaus.htm 它在Safari和Firefox上看起来很好。我一直在互联网上阅读关于IE的css特定代码，并尝试了不同的方法来解决这个问题，但它并没有起作用。我究竟做错了什么？谢谢！

<!--[if IE]>
<style>
    .breadcrumbs {
         margin-top: -22px;
    }
</style>
<![endif]-->


<style>
    .ie .breadcrumbs {
         margin-top: -22px;
    }
</style>

<style>
    #breadcrumbs {
         margin-top: -22px;
    }
</style>

Answer 1

可能不同的高度是由于不同浏览器上的不同字体呈现引擎造成的，因为此元素由<br />元素定位。

您可以使用条件语句，例如

<!--[if IE]>
    .element{
        margin-top: 10px;
    }
<![endif]-->

..添加只有IE6 - 9才会呈现的代码，但这在IE10及以上版本中无效。

你也可以使用浏览器嗅探，但这确实不是一个好的解决方案，因为让一个代码库跨浏览器工作会更好。您还无法预测用户将使用的所有浏览器。

您分享的网站也使用了相当多的负边距和绝对位置，这也会导致布局问题不一致。

我的建议是删除所有<br />元素，删除尽可能多的负边距和绝对位置，并使用更简单的系统打开页面。例如，您已经从面包屑的文本中分离出面包屑的背景 - 这些应该真的在一起，以便您可以轻松地将它们组合在一起。

希望有所帮助

用于margin-top的IE特定代码

1 个答案: