1

私の目標は、幅と高さが 200% のレイアウトを作成し、同じ高さと幅 (それぞれ 100%) の 4 つのコンテナーを持ち、ベア ミニマムとして JavaScript を使用しない (またはできればハックを使用しない) ことです。

現在、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/

4

1 に答える 1

1

解決しました！

多くの問題があったことが判明しました。

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)});@*/コメントがドキュメントの head 内のスクリプト タグに必要であることです。

次に、IE7 以下で認識しないなどについては、 Quirksmodedisplay:tableを参照してください。

最後に、IE が何を参照すればよいかを認識できるように、html の body 要素には height:100% が必要でした。

とにかく、これは修正され、うまく機能します。

于 2010-03-20T03:33:58.257 に答える