Question

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

在任何情况下，div和HTML5的语义都要好得多，所以我真的希望以下示例有效。主要问题是IE9＆amp; 10，＆＃34;部分行＆＃34;由于高度100％＆＃39;值。所有其他浏览器似乎反应良好。

有谁知道如何解决这个问题（理想情况下没有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;
    }

Answer 1

在这个问题上花了几天后，似乎对于这个特定的布局（特别是100％的高度），使用表格是最好的选择。这个问题不同的3个不同线程无法得到结果（所以我怀疑这个IE错误是2014年继续使用表格的一个原因）：

通过阅读有关表格和搜索引擎优化的更多信息，我也无法找到任何相关信息或有形数据使用单个表格会产生任何影响。我能找到的唯一有形信息是，只有在客户端下载完整的HTML后才会显示表格。考虑到HTML在网页整体尺寸方面的规模，2014年这也不是一个大问题。 CSS可以用于所有表的样式，它解决了我看到的关于表的其他一些抱怨。这篇文章可能反映了最好的情况：

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

2014年的表格可能没问题：）

当高度为100％时显示表CSS的IE 10错误？

1 个答案: