3

それぞれがウィンドウ/ビューポートの 100% の高さを持つ 3 つのセクションで構成されるページを作成しようとしています。Chrome、Firefox (少なくとも新しいバージョン)、および Safari で動作するこれを行う方法を見つけました。ただし、IE8 (およびおそらく他のバージョン) では機能しません。

テスト ページは次のとおりです: http://dev.manifold.ws/test3/

HTMLは次のとおりです。

<body>

    <section id="section1">
    </section>

    <section id="section2">
    </section>

    <section id="section3">
    </section>

</body>

CSS は次のとおりです。

#section1 {
    min-height:100%;
    position:relative;
    background:#fc1b59;
}

#section2 {
    min-height:100%;
    position:relative;
    background:#d5ea27;
}

#section3 {
    min-height:100%; 
    position:relative;
    background:#0048ff;
}

これに対するクロスブラウザソリューションを持っている人はいますか? (少なくとも主要な新しいブラウザ) ありがとう!

-トム

4

2 に答える 2

3

HTML5用のIEjavascriptshivを追加し、すべてのHTML5要素をBLOCK要素として宣言する必要があります。

http://code.google.com/p/html5shiv/

このリセットされたCSSファイルをベースとして使用することを検討してください。

http://meyerweb.com/eric/tools/css/reset/

于 2012-08-27T15:39:46.157 に答える
0

まず、IE8 は<section>(HTML5) タグを認識しないため、JS を追加する必要があります。

<!--[if lt IE 9]>
   <script>
      document.createElement('header');
      document.createElement('nav');
      document.createElement('section');
      document.createElement('article');
      document.createElement('aside');
      document.createElement('footer');
   </script>
<![endif]-->

（ソース）

<section>次に、ブロックであるIE8 を指定する必要があります。

section {
    display: block;
}

ここに動作するJsFiddleがあります

于 2012-08-27T15:41:11.400 に答える