IE 10的错误与显示表CSS当高度是100％？ [英] IE 10 bug with display table CSS when height is 100%?
问题描述
我一直在尝试3天，以避免在我的新的响应式设计中使用表，主要是因为每个人都说他们是邪恶的。另一方面，当对SEO和表做更多的研究时，有些人甚至说它提高了它们的可见性。
I've been trying for 3 days to avoid using table in my new responsive design, mostly because everyone says they are evil. On the other hand while doing more research on SEO and table, some people even say it improves their visibility.
在任何情况下，语义是更好的div和HTML5 ，所以我真的想让这个例子工作。主要问题是在IE9& 10，section row将由于'height 100％'值而溢出。所有其他浏览器似乎反应良好。
In any case, the semantic is much nicer with divs and HTML5, so I would really like to have this following example working. The main problem is that in IE9 & 10, the "section row" will overflow because of the 'height 100%' value. All other browsers seems to be reacting fine.
有没有人知道如何解决这个问题（最好没有Javascript？）：
Does anyone know how to solve this (ideally without Javascript?) :
JSFiddle： http://jsfiddle.net/fvqvdske/1/
JSFiddle: http://jsfiddle.net/fvqvdske/1/
全尺寸页面以 IE10 模拟模式测试： http://jsfiddle.net/fvqvdske/1/show
Fullsize page to test in IE10 emulation mode: http://jsfiddle.net/fvqvdske/1/show
唯一的问题是溢出和IE9,10 - 中间行需要填充页眉和页脚留下的所有空间（并且页眉和页脚需要能够动态调整高度以适应其内容，例如，没有固定的位置，没有绝对位置）。
The only problem is the overflow and IE9, 10 - the middle row needs to fill all the space left by the header and footer (and the header and footer needs to be able to adjust height to fit their content dynamically e.g. no fixed, no absolute positions).
HTML
<body>
<header role="banner">
<div>
<div>
This is the top banner
</div>
</div>
</header>
<section role="main">
<div>
<div>
<div>
<div>
<div style="border: 2px solid red;">
This is the content<br/>
This is the content<br/>
This is the content<br/>
This is the content<br/>
This is the content<br/>
</div>
</div>
</div>
</div>
</div>
</section>
<footer role="contentinfo">
<div>
<div>
This is the footer
</div>
</div>
</footer>
</body>
CSS
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
height: 100%;
width: 100%;
display: table;
position: absolute;
border-spacing: 0;
border-collapse: collapse;
}
header, footer, section {
display: table-row;
text-align: center;
vertical-align: middle;
height: 1px;
}
header > div, section > div, footer > div {
display: table-cell;
vertical-align: middle;
}
header > div > div,
section > div > div,
section > div > div > div,
footer > div > div {
max-width: 400px;
width: 100%;
margin: auto;
background-color: brown;
}
section,
section > div,
section > div > div,
section > div > div > div,
section > div > div > div > div {
box-shadow: inset 0 1em 1em -1em #222, inset 0 -1em 1em -1em #222;
height: 100%;
vertical-align: middle;
}
section > div {
display: table-cell;
width: 100%;
height: 100%;
}
section > div > div {
display: table;
margin: auto;
}
section > div > div > div {
display: table-row;
}
section > div > div > div > div {
display: table-cell;
}
section {
}
/* temp */
header {
background-color: pink;
}
section {
background-color: yellow;
}
footer {
background-color: orange;
}
推荐答案
这个问题，似乎对于这个特定的布局（特别是100％的高度），使用表是最好的选择。这3个不同的线程与不同的问题的扭曲无法获得结果（所以我怀疑这个IE错误是在2014年继续使用表的一个原因）：
After spending a few days on this question, it seems that for this specific layout (especially the 100% height), using tables is the best option. Those 3 different threads with different twist of the question were unable to get results (so I suspect that this IE bug is one reason to keep using tables in 2014):
IE 10 bug with display table CSS when height is 100%?
通过阅读有关表和SEO的更多信息，我还无法找到任何相关信息或有形数据使用单个表有任何影响。我能够找到的唯一有形的信息是，表只有在客户端下载完整的HTML后才会显示。这也不是2014年的一个大问题，考虑到HTML的大小在网页的整体大小。 CSS可以用于所有的表格样式，解决了我看到的表的一些其他抱怨。这篇文章可能反映了最佳情况：
By reading more about tables and SEO, I was also unable to find any relevant information or tangible data that using a single table would have any impact at all. The only tangible information I was able to find is that tables will only display once the full HTML has been downloaded in the client. Which again is not a big issue in 2014 considering the HTML's size in the overall size of a web page. CSS can be used for all of the table's style which solves some of the other complains I saw about tables. This article probably reflects best the situation here:
http ：//olav.dk/articles/tables.html
2014年表格可能还不错：）
Tables in 2014 might be ok :)
这篇关于IE 10的错误与显示表CSS当高度是100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
