Internet Explorer 基于百分比的布局问题答案

【问题标题】：Internet Explorer percent based layout issueInternet Explorer 基于百分比的布局问题
【发布时间】：2010-03-19 00:50:54
【问题描述】：

我的目标是制作一个宽度和高度为 200% 的布局，包含四个高度和宽度相等的容器（每个 100%），不使用 javascript 作为最低限度（或者最好不使用 hack）。

现在我正在使用 HTML5 和 CSS display:table。它在 Safari 4、Firefox 3.5 和 Chrome 5 中运行良好。我还没有在旧版本上测试过。

不过，在 IE7 和 IE8 中，这种布局完全失败了。（我确实使用了Javascript HTML5启用脚本/cc../，所以不应该使用新的HTML5标签）

这是我所拥有的：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="UTF-8" />
        <title>IE issue with layout</title>
        <style type="text/css" media="all">
            /* styles */
            @import url("reset.css");

            /* Generall CSS */          
            .table
            {
                display:table;
            }

            .row
            {
                display:table-row;
            }

            .cell
            {
                display:table-cell;
            }


            /* Specific CSS */
            html, body
            {
                //overflow:hidden; I later intend to limit the viewport
            }

            section#body
            {
                position:absolute;
                width:200%;
                height:200%;
                overflow:hidden;
            }

            section#body .row
            {
                width:200%;
                height:50%;
                overflow:hidden;
            }

            section#body .row .cell
            {
                width:50%;
                overflow:hidden;
            }

            section#body .row .cell section
            {
                display:block;
                width:100%;
                height:100%;
                overflow:hidden;
            }

            section#body #stage0 section header
            {
                text-align:center;
                height:20%;
                display:block;
            }

            section#body #stage0 section footer
            {
                display:block;
                height:80%;
            }

        </style>
    </head>
    <body>
        <section id="body" class="table">
            <section class="row">
                <section id="stage0" class="cell">
                    <section>
                        <header>
                            <form>
                                <input type="text" name="q" />
                                <input type="submit" value="Search" />
                            </form>
                        </header>
                        <footer>
                            <table id="scrollers">
                            </table>
                        </footer>
                    </section>
                </section>
                <section id="stage1" class="cell">
                    <section>
                        content
                    </section>
                </section>          
            </section>
            <section class="row">
                <section id="stage2" class="cell">
                    <section>
                        content
                    </section>
                </section>
                <section id="stage3" class="cell">
                    <section>
                        content
                    </section>
                </section>
            </section>
        </section>
    </body>
</html>

你可以在这里看到它：http://www.tombarrasso.com/ie-issue/

【问题讨论】：

请注意，// 在 CSS 中不是有效的注释语法 - 只有 /* ... */ 在 CSS 中有效。
查看 IE8 开发工具，看起来 IE 完全无法“嵌套”您的 HTML5 标签。我不确定这是否只是开发工具起作用，或者它是否准确反映了 IE 将您的代码“解释”为什么。（顺便说一下，它适用于 IE9 Dev Preview 1）
事实证明，如果我将 /*@cc_on...*/ 添加到头部的脚本标记中，而不是外部文件中，它可以在 IE8 中正常工作。但是布局本身在 IE7 中的行为有所不同，一个单元格占据了整个 200%，并且没有显示其他内容。
好吧，我已经走得更远了。原来 IE7 不支持 display:table 等。我快到了，除了 IE7 有百分比问题。 200% 的高度在 IE7 中会导致两条线（在 IE8 和其他所有情况下都可以）。

标签： css html tablelayout

【解决方案1】：

解决了！

原来有很多问题。

一个是这个/*@cc_on'abbr article aside audio canvas details figcaption figure footer header hgroup mark menu meter nav output progress section summary time video'.replace(/\w+/g,function(n){document.createElement(n)});@*/注释需要在文档头部的脚本标签中。

其次，IE7及以下无法识别display:table之类的，见Quirksmode。

最后，html、body 元素需要有 height:100% 以便 IE 知道要引用什么。

无论如何，这是固定的，效果很好。

【讨论】：