css - Internet Explorer 9 中的躲猫猫错误？

Question

好吧，我很困惑。

IE9 在开发中的网站的部分而非所有页面上显示不一致的页面宽度问题。

在 IE9 中:转到 http://sistercarmen.org/cms/您可以看到与正确页面大致相同的内容。实际上页面有点太宽了，这肯定是个问题。但与 About 上发生的事情完全不同页面或 History页面。

在那些页面上，页面确实变得非常宽。但是，如果您将鼠标悬停在右栏中的链接上(可能需要水平滚动才能看到)，页面会迅速恢复到正确的大小。

构建 simplified test page @ jsFiddle ，我可以确认这似乎与 display: table 相关，但这对我很重要，因此我可以稍后在源代码中提供 Nav。一个even simpler test page显示 display:table 通常适用于 IE9。

所以 ... 这是 hasLayout 问题吗？如果是，我如何在 IE9 中强制使用 hasLayout？

非常感谢，

杰里米

Answer 1

你是对的，这很奇怪。对于它的值(value)，您的页面在 IE10 中运行良好。

在我可用的时间内，我无法为您找到合适的解决方案，但与此同时，您是否考虑过应用 width 或 max-width 到正文文本元素？

[编辑]

我可以确认将 width:100% 添加到 content-lead 元素将解决该问题。

仍然不能回答问题发生的原因，但至少它是一种解决方法。

[再次编辑]

实际上，上面的变通办法并不像我最初想象的那么好。 width:100% 只对我有用，因为我在控制台玩游戏。在 CSS 中执行此操作没有任何效果。

设置固定宽度可能会有所帮助，或者如果完全固定的宽度不合适，则可能使用 CSS calc()。