Проблема макета Internet Explorer на основе процентов

Моя цель — сделать макет с шириной и высотой 200 %, с четырьмя контейнерами одинаковой высоты и ширины (каждый по 100 %), не используя 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/


html css tablelayout
person Tom    schedule 19.03.2010    source источник
comment
просто примечание, // недопустимый синтаксис комментария в CSS - только /* ... */ допустим в CSS.   -  person scunliffe    schedule 19.03.2010
comment
Глядя на инструменты разработчика IE8, похоже, что IE полностью не вкладывает ваши теги HTML5. Я не уверен, что это просто инструменты разработчика, или они точно отражают то, как IE интерпретировал ваш код. (Кстати, это работает в IE9 Dev Preview 1)   -  person scunliffe    schedule 19.03.2010
comment
Оказывается, если я добавил /*@cc_on...*/ в тег скрипта в голове, а не во внешний файл, он работает в IE8 так, как должен. Однако сам макет ведет себя по-другому в IE7, одна ячейка занимает все 200%, а другое содержимое не отображается.   -  person Tom    schedule 19.03.2010
comment
Ну я продвинулся еще дальше. Оказывается, IE7 не поддерживает display:table и тому подобное. Я почти достиг цели, за исключением того, что в IE7 есть проблема с процентами. Высота 200% приводит к двум строкам в IE7 (в IE8 и во всех остальных это нормально).   -  person Tom    schedule 20.03.2010

Ответы (1)


arrow_upward
1
arrow_downward

Решено!

Оказалось, что проблем было много.

Во-первых, этот комментарий /*@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 должны иметь высоту: 100%, чтобы IE знал, на что ссылаться.

В любом случае, это исправлено и отлично работает.

person Tom    schedule 20.03.2010