带有display:table的Internet Explorer 8错误
md1*_*337 5 css internet-explorer 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:
这太疯狂了!
有人可以试一试,让我知道它是如何产生的吗？谢谢.我希望在我阅读解决方案时我不会自杀!-)
md1*_*337 18
事实证明,正如一些人所建议的,IE的兼容模式是以某种方式触发的.
我发现这是因为我在Intranet上运行该页面,默认情况下,Intranet网站启用了兼容模式.
可以通过转到"工具">"兼容性视图设置"并在"兼容性视图"框中取消选中"显示Intranet站点"来禁用此功能.当然,这不是你想要让所有用户都这么做的事情,所以建议我添加
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
在标题中,效果很好.
更多信息:http://msdn.microsoft.com/en-us/library/cc288325%28VS.85%29.aspx
浏览器处于兼容性视图时的问题.(按照taylorjes的建议)
当页面以普通视图显示时,单元格是水平的.在兼容性视图中显示时,单元格是垂直的.
正如我在评论中所说,我强烈反对显示:( table/table-row/table-cell)CSS属性.它没有得到很好的支持,必然会有怪癖.
老实说,如果您显示的是表格数据,那么使用表格.用于布局时,表格只是邪恶的.
- `alert(document.documentMode)`会告诉你'8`或`7`(或'5`用于怪癖模式).使用`<meta http-equiv ="X-UA-Compatible"content ="IE = edge"/>`强制IE使用它可用的"最佳"标准模式.否则,如果用户请求,默认或意外点击,或者Microsoft将您置于兼容性列表中,您可能会成为兼容模式的受害者. (7认同)
- @bobince:好评!你救了这一天. (3认同)
| 归档时间： |
|
| 查看次数： |
24622 次 |
| 最近记录： |