Question

以下是该网站在Internet Explorer上的显示方式： http://www.browserstack.com/screenshots/0c3c039e85f44bb70fddfc34b887b5bbc3357899

我只在Windows 8.1的最新版IE上看过它，但它也可能在旧版本上发生。不幸的是，我在Mac上并且找不到任何模拟器来运行IE ..所以我来到了我所知道的最精通技术的社区中寻求帮助。

该网站（使用Wordpress构建）为commercialpaintersinc.com。它在Google Chrome和Safari上看起来很棒..所以这个问题似乎只是在IE中（尽管我还没有在Firefox中进行过测试......）。

这是它应该看起来的样子： enter image description here

任何人都知道我输入的CSS导致了这个问题和/或我如何修复它以使它看起来在所有浏览器上应该如何？

主要感谢任何反馈。谢谢！

Answer 1

您目前正在使用负边距来调整布局，这会在所有三个主要渲染引擎（Trident，Blink和Gecko）中产生截然不同的结果。我建议不要这样做，因为这些供应商可能需要讨论哪种方法是正确的，或者是否所有三种方法都需要调整以更好地符合第四种方案。

主要问题是您的徽标超出负面边距。如果您要绝对定位图像，则可以获得更一致的结果。但是，一旦这样做，您将需要恢复标题的布局，因为关键元素将不再对其尺寸做出贡献。

#logo {
    position: absolute;
}

#main-header {
    min-height: 160px;
}

以上两条规则似乎在IE和Firefox中恢复了我的布局。话虽这么说，我仍然认为Chrome可能在这里出错了 - 你应该经常在所有三个主流浏览器中测试你的布局，以确保你不会在浏览器bug的基础上构建。

我在Internet Explorer团队工作，并在内部提交了一个问题，以便我们进一步调查此特定布局异常。我也创建了reduced demo of the issue as a public fiddle。

如果您以后需要从Mac测试Internet Explorer，请访问http://modern.ie。

Answer 2

谢谢大家的帮助。我心理障碍，这个社区再次帮助我前进。

乔纳森桑普森是正确的，根本原因是CSS最初没有正确完成。哈哈，我自己做了CSS编辑，我自学成才，所以这对我来说并不奇怪。但是，我已经提出了一个解决方案。

我的解决方案：

我使用了着名的CSS浏览器选择器脚本，可在此处找到：http://rafael.adm.br/css_browser_selector

我将它添加到我的JS文件夹（mysite.com/wp-includes/js/css_browser_selector.js），然后添加： <script src="css_browser_selector.js" type="text/javascript"></script> 就在header.php文件中的</head>标记之前。

此时我能够创建特定于浏览器的CSS。 FF和IE是如此挑剔，因为它最初工作得很好，我在Chrome和Safari中都有它......但是很好。

以下是Chrome / Safari与Firefox / IE代码的代码：

Chrome / Safari（Webkit）：

.webkit #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999;
background: #fff;
border-radius: 150px;
border: 20px solid #fff;
}
.webkit #main-header {
padding: 10px 0 0 0;
margin-bottom: -65px;
margin-top: -20px;
}

Firefox（同样用于IE）：

.gecko .et_pb_slider {
top: -60px;
margin-bottom: -63px;
}
.gecko #logo {
margin-bottom: 10px;
max-height: 110px;
position: relative;
z-index: 99999 !important;
background: none repeat scroll 0% 0% #FFF;
border: 20px solid #FFF !important;
border-radius: 150px;
}
.gecko #main-header {
margin-top: -20px;
}

所以是的，在我“解决”问题之前，我没有看到Jon的回答。所以，我会保留原样..虽然我确定我的CSS非常草率！：P

IE浏览器的屏幕截图现在已修复： http://www.browserstack.com/screenshots/0d669a15d18040086fede2df90f134e526aef8f3

谢谢，
克里斯

我需要将哪些特定于CSS的CSS添加到我的Wordpress网站来解决此问题？

2 个答案: