CSS Internet Explorer 8 错误显示：表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3764699/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Internet Explorer 8 bug with display: table
提问by md1337
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:
我遇到了最奇怪的错误...我正在尝试使用 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>
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:
现在这就是我用 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 :-)
有人可以尝试一下，让我知道结果如何吗？谢谢你。我希望我在阅读解决方案时不会自杀:-)
回答by md1337
It turns out that, as suggested by some, IE's compatibility mode was triggered somehow.
事实证明，正如一些人所建议的那样，IE 的兼容模式是以某种方式触发的。
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.
我发现这是因为我在 Intranet 上运行该页面，并且默认情况下为 Intranet 网站启用了兼容模式。
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
这可以通过转至工具 > 兼容性视图设置并取消选中在兼容性视图中显示 Intranet 站点框来禁用。当然，这不是您一定要要求所有用户做的事情，因此建议我添加
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
in the header, which works great.
在标题中，效果很好。
More info on that: http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
更多信息：http: //msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
回答by riwalk
The problem when the browser is in compatibility view. (as suggested by taylorjes)
浏览器处于兼容性视图时的问题。（如 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.
正如我在评论中所说，我非常不鼓励 display:(table/table-row/table-cell) CSS 属性。它没有得到很好的支持，并且肯定会有一些怪癖。
Honestly if what you are displaying is tabular data, then use a table. Tables are only evil when used for layout.
老实说，如果您显示的是表格数据，请使用 table。表格仅在用于布局时才是邪恶的。
