-1

複数の異なるHTML要素から固定位置ヘッダーを組み立てようとしていますが、配置上の理由から、ビューポートの上部に色の背景バーを提供することはできません。FirefoxとIE9で動作する生成コンテンツで違いを補おうとしていますが、IE8では問題が発生します。

次に例を示します。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                      "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>IE8 Positioning Demo</title>
    <style type="text/css">
      html {
        margin: 0;
        padding: 0;
      }
      html:before {
        /* A gray bar across the top of the window */
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 30px;
        background: #cccccc;
        content: " ";
      }
      body {
        margin-top: 35px;
      }
      h1 {
        /* Position the h1 on top of the gray bar */
        position: fixed;
        top: 0;
        margin: 0;
        font: 16px serif;
      }
    </style>
  </head>

  <body>
    <h1>Banner text</h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
      a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula
      ac quam viverra nec consectetur ante hendrerit. Donec et mollis
      dolor. Praesent et diam eget libero egestas mattis sit amet
      vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia
      consectetur. Donec ut libero sed arcu vehicula ultricies a non
      tortor. Lorem ipsum dolor sit amet, consectetur adipiscing
      elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a
      semper sed, adipiscing id dolor. Pellentesque auctor nisi id
      magna consequat sagittis. Curabitur dapibus enim sit amet elit
      pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero
      in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi
      quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque
      penatibus et magnis dis parturient montes, nascetur ridiculus
      mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem
      facilisis semper ac in est.</p>
  </body>
</html>

ページがスクロールするように、ウィンドウのサイズを変更する（またはlorem ipsumを数回コピーして貼り付ける）必要があります。IE8はh1を適切position: fixedに処理しますが、html：beforeをまたはのいずれかとして処理しているようabsoluteですstatic。

この不整合について何ができますか？

4

1 に答える 1

2

html:前に? 真剣に？いったい何を達成しようとしているのですか？ウィンドウの上部にバーが必要な場合は、それを の最初の要素として配置します。html 要素の前には何も置かないでください。

多分それが彼の問題の原因です。これを試してください：http://jsfiddle.net/M314/JQaTG/

于 2012-09-21T11:15:14.673 に答える