css - 当高度为 100% 时，显示表格 CSS 的 IE 10 错误？

我已经尝试了 3 天来避免在我的新响应式设计中使用表格，主要是因为每个人都说他们是邪恶的。另一方面，在对 SEO 和表格进行更多研究的同时，一些人甚至说这提高了他们的知名度。

无论如何，div 和 HTML5 的语义要好得多，所以我真的很想让下面的例子起作用。主要问题是在 IE9 & 10 中，“section row”会因为'height 100%'值溢出。所有其他浏览器似乎都 react 良好。

有谁知道如何解决这个问题(最好不用 Javascript？):

JSFiddle:http://jsfiddle.net/fvqvdske/1/

要在 IE10 仿真模式下测试的全尺寸页面:http://jsfiddle.net/fvqvdske/1/show

唯一的问题是溢出和 IE9、10 - 中间行需要填充页眉和页脚留下的所有空间(并且页眉和页脚需要能够调整高度以适应动态地适应他们的内容，例如没有固定的，没有绝对的位置)。

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 年继续使用表格的原因之一):

通过阅读更多关于表格和 SEO 的信息，我也找不到任何相关信息或有形数据表明使用单个表格会产生任何影响。我能找到的唯一有形信息是，只有在客户端下载了完整的 HTML 后，表格才会显示。考虑到 HTML 在网页整体大小中的大小，这在 2014 年也不是什么大问题。 CSS 可以用于表格的所有样式，这解决了我看到的关于表格的其他一些提示。这篇文章可能最好地反射(reflect)了这里的情况:

http://olav.dk/articles/tables.html

2014 年的表可能没问题:)

关于css - 当高度为 100% 时，显示表格 CSS 的 IE 10 错误？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25591703/

css - 当高度为 100% 时，显示表格 CSS 的 IE 10 错误？

上一篇：html - Gmail 字体颜色问题

下一篇：html - 从 CSS 而不是 HTML 选择图像