代码之家 › 专栏 › 技术社区 › Nicolas Bouvrette

当高度为100%时,显示表格CSS的IE 10错误?

css-tables internet-explorer html css

Nicolas Bouvrette · 技术社区 · 10 年前

三天来,我一直在努力避免在我的新响应设计中使用表,主要是因为每个人都说他们是邪恶的。另一方面,在对搜索引擎优化和表格进行更多研究的同时,一些人甚至表示这提高了他们的知名度。

在任何情况下,div和HTML5的语义都要好得多,所以我真的很想让下面的例子发挥作用。主要问题是在IE9&10,由于“高度100%”值,“截面行”将溢出。所有其他浏览器似乎都反应良好。

有人知道如何解决这个问题吗(理想情况下没有Javascript?):

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

要测试的全尺寸页面 第10页 仿真模式: 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;
    }

1 回复 | 直到 7 年前

Community CDub 7 年前

在这个问题上花了几天时间之后,似乎对于这个特定的布局(尤其是100%的高度),使用表格是最好的选择。这三个不同的线程都无法得到结果(所以我怀疑这个IE bug是2014年继续使用表的原因之一):

通过阅读更多有关表格和SEO的信息,我也无法找到任何相关信息或有形数据 使用单个 这张桌子会有任何影响。我能找到的唯一有形信息是,只有在客户端下载了完整的HTML之后,表才会显示。考虑到HTML在网页总大小中的大小,这在2014年也不是一个大问题。CSS可以用于所有表格的样式,这解决了我看到的关于表格的一些其他抱怨。本文可能最好地反映了这里的情况:

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

2014年的表格可能还可以:)