在IE8中固定位置和生成的内容

-1

我试图从多个不同的HTML元素中组合一个固定位置的标题，并且出于定位的原因，它们都不能在视口顶部提供背景条的颜色。我一直在努力弥补生成的内容的差异，这些内容适用于Firefox和IE9，但它在IE8中遇到了麻烦。在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存有几次），使页面滚动。 IE8将h1正确对待为position: fixed，但它似乎在处理html：之前为absolute或static。

我该如何处理这种不一致？

来源

2012-09-21 Grant Watson

html：before？真的吗？你想要完成什么？如果你想要一个横跨窗口顶部的小节，把它作为''中的第一个元素。没有什么应该在html元素之前。 – Kyle

酒吧本身没有语义价值;这是一个纯粹的图形化的东西，将其添加到标记是没有意义的。而且：在伪元素被作为其拥有元素的一部分进行布局处理之前 - 所以它被认为是HTML标记的第一个子元素。这意味着其他'position：fixed'块将自然堆叠在它上面。我相信标记和CSS是正确的，他们在现代浏览器中工作，包括IE9。这是IE8，这是我的问题。 –

它是文档中的一个元素，因此它属于文档的主体。如果它是描述文档或者为文档获取资源的元素（js库等），它就会成为头等大事。它是纯粹的图形化的东西并不重要。如果是这种情况，并且希望保持标记语义，请使用带'display：block;'的''。请勿将“”和“”以外的元素直接放在HTML元素中。这很可能是你的问题的原因。 – Kyle

html：before？真的吗？你想要完成什么？如果你想要一个横跨窗口顶部的酒吧，把它作为第一个元素。没有什么应该在html元素之前。

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

来源

2012-09-21 11:15:14 M314

在IE8中固定位置和生成的内容

回答

相关问题