當高度為100％時顯示表CSS的IE 10錯誤？

Question

我已經嘗試了3天以避免在我的新響應式設計中使用表格，主要是因為每個人都說他們是邪惡的。 另一方面，在對SEO和桌子進行更多研究的同時，有些人甚至說它提高了他們的知名度。

在任何情況下，div和HTML5的語義都要好得多，所以我真的希望以下示例有效。 主要問題是在IE9和10中，由於“高度100％”值，“節行”將溢出。 所有其他瀏覽器似乎反應良好。

有誰知道如何解決這個問題（理想情況下沒有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 個解決方案

解決方案1
2 已采納 2014-08-31 19:14:25

當高度為100％時顯示表CSS的IE 10錯誤？

問題描述

1 個解決方案

解決方案1 2 已采納 2014-08-31 19:14:25

解決方案1
2 已采納 2014-08-31 19:14:25