Internet Explorer 8 显示错误：表格
我遇到了有史以来最奇怪的错误...我正在尝试使用 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>
这是预期的结果，这是我第一次加载后得到的结果。
现在，这就是我使用 F5 重新加载页面后得到的结果：
这太疯狂了！
有人可以尝试一下并让我知道他们的结果如何吗？谢谢。我希望当我读到解决方案时我不会自杀:-)
I have the weirdest bug ever... I'm experimenting with display: table, and my proof of concept works on the very first try after opening a new process, but any subsequent reloading of the page breaks the design. Here is the simple HTML page:
<!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>
And here is the expected result, this is what I get after loading the first time.
Now that's what I get after reloading the page, with F5:
It's insane!!!
Can someone please try it and let me know how it comes out for them? Thank you. I hope I will not have killed myself by the time I read the solution :-)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
事实证明，正如一些人所建议的那样，IE 的兼容模式是以某种方式被触发的。
我发现这是因为我在内联网上运行该页面，并且默认情况下为内联网网站启用了兼容模式。
可以通过转到工具> 来禁用此功能。兼容性视图设置并取消选中在兼容性视图中显示 Intranet 站点框。当然，这并不是您必须要求所有用户都做的事情，因此建议我
在标题中添加，效果很好。
有关详细信息：http://msdn.microsoft。 com/en-us/library/cc288325%28VS.85%29.aspx
It turns out that, as suggested by some, IE's compatibility mode was triggered somehow.
I found out that it's because I'm running the page on an Intranet, and by default compatibility mode is enabled for Intranet websites.
This can be disabled by going to Tools > Compatibility View Settings and unchecking the Display intranet sites in Compatibility View box. Of course this is not something you necessarily want to ask all your users to do, so it was suggested to me to add
in the header, which works great.
More info on that: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
浏览器处于兼容性视图时的问题。 （按照 taylorjes 的建议）
当页面以普通视图显示时，单元格是水平的。在兼容性视图中显示时，单元格是垂直的。
正如我在评论中所说，我强烈建议不要使用 display:(table/table-row/table-cell) CSS 属性。它没有得到很好的支持，并且肯定会有一些怪癖。
老实说，如果您显示的是表格数据，那么请使用表格。表格只有在用于布局时才是邪恶的。
The problem when the browser is in compatibility view. (as suggested by taylorjes)
When the page is displayed in normal view, the cells are horizontal. When displayed in compatibility view, the cells are vertical.
As I said in my comment, I would highly discourage the display:(table/table-row/table-cell) CSS property. It is not well supported and is bound to have quirks.
Honestly if what you are displaying is tabular data, then use a table. Tables are only evil when used for layout.