logo标签列表

Internet Explorer 8显示问题：display: table的bug

cssinternet-explorerinternet-explorer-8
5

我遇到了一个非常奇怪的bug... 我正在尝试使用display: table，我的样例在第一次打开新进程后就能正常工作，但是任何后续的页面刷新都会破坏设计。以下是简单的HTML页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <style>
        .container {
            display: table;
        }

        .row {
            display: table-row;
        }

        .cell {
            display: table-cell;
            width: 100px;
            height: 100px;
            border: 1px solid blue;
            padding: 1em;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="cell">CELL A</div>
            <div class="cell">CELL B</div>
            <div class="cell">CELL C</div>
        </div>
    </div>
</body>
</html>

这是预期的结果，第一次加载后我得到了这个。 alt text 现在这是我按F5重新加载页面后得到的结果： alt text 太疯狂了!!!
请有人试试并让我知道它们的结果如何？谢谢。希望在阅读解决方案之前我不会自杀 :-)
1
@md1337：考虑到IE8已经发布一段时间了，为什么你是第一个发现这个bug的人？ - John Saunders
5
我强烈不建议使用CSS属性：display:(table/table-row/table-cell)。这个属性得不到很好的支持，而且容易出现小问题。如果你要显示表格数据的话，直接使用表格元素吧。只有在用于布局时，表格才会被认为是有害的。 - riwalk
检查兼容模式。IE8应该呈现display: table。也许你应该简单地使用一个表格？ - taylorjes
1
@md1337 不管你问的是什么，重要的是你正在使用容易出错的CSS，并抱怨出现了错误。首先不要使用容易出错的CSS。 - riwalk
@md1337，即使使用了“<meta http-equiv....”，我在设计视图中仍然得到相同的结果-您能告诉我您是如何解决这个问题的吗？谢谢。 - NoChance
显示剩余2条评论
2个回答
18

事实证明，正如一些人所建议的那样，IE的兼容模式以某种方式被触发了。

我发现这是因为我在一个内部网络上运行该页面，而默认情况下针对内部网络网站启用了兼容性模式。

可以通过转到“工具”>“兼容性视图设置”并取消选中“在兼容性视图中显示内部网站”框来禁用它。当然，这不是您必须要求所有用户做的事情，因此有人建议我添加

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
在标头中，这非常有效。更多信息请参见：http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
6
当浏览器处于兼容性视图时会出现问题（如taylorjes所建议的）。在正常视图下显示页面时，单元格是水平的。当在兼容性视图下显示时，单元格是垂直的。正如我在评论中所说，我强烈不建议使用display:(table/table-row/table-cell) CSS属性。它的支持不够好，容易出现问题。如果你要显示的内容是表格数据，那就使用表格。只有当用于布局时，表格才是有问题的。
@md1337 - 你不需要这样做。你需要编写兼容多个浏览器的代码（因此我反对使用那些CSS属性）。 - riwalk
@md1337。哦，在你想其他的之前，我要说一下，这个踩票不是我干的。这是一个合理的问题，即使答案不是你想要的。 ;) - riwalk
7
alert(document.documentMode) 将告诉您 8 或 7（在怪异模式下为 5）。使用 <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 可以强制 IE 使用其可用的“最佳”标准模式。否则，如果用户请求、默认或意外点击了兼容性视图按钮，或者 Microsoft 将您加入了兼容性列表，则可能会遭受兼容性视图的影响。 - bobince
3
@bobince：很棒的评论！你救了我们一天。 - md1337
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接