-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 视为absoluteor static。

对于这种不一致，我能做些什么？

4

1 回答 1

2

html：之前？严重地？你到底想完成什么？如果你想要一个横过窗口顶部的栏，把它作为第一个元素放在 . html 元素之前不应出现任何内容。

也许这就是他问题的根源。试试这个：http: //jsfiddle.net/M314/JQaTG/

于 2012-09-21T11:15:14.673 回答