position:fixed; 在IE9下无效果的问题

本文转自:http://www.cnblogs.com/xinwang/archive/2013/04/06/3002384.html

平常DIV+CSS布局时,position属性一般用absoulte|relative用到的比较多;昨晚在做到一个静态网页,在实现腾讯的空间头部的导航栏时用到position:fixed;属性---代码如下:

复制代码
 1 <html>

 2     <head>

 3         <title></title>

 4     </head>

 5     <body style="margin:0;">

 6         <div style="position:fixed; top:0; left:0; width:100%; background-color:#234533; height:30px; dispalay:inline;"></div>

 7         <div style="height:1000px;">

 8         </div>

 9     </body>

10 </html>
复制代码

运行发现在Google Chrome,FireFox都可以的,但是在IE9就不行了很是郁闷,因为IE6以上的版本都是支持fixed的属性的;上网上找了好久没找到,因为不知道关键字该怎么搜,最后用最笨的方法,查看源码,一点点找最终发现以前被自己忽视的问题:HTML 里面的<!DOCTYPE>标签。 后果断在头部加上<!DOCTYPE HTML>解决;

复制代码
<!DOCTYPE HTML>

<html>

    <head>

        <title></title>

    </head>

    <body style="margin:0;">

        <div style="position:fixed; top:0; left:0; width:100%; background-color:#234533; height:30px; dispalay:inline;"></div>

        <div style="height:1000px;">

        </div>

    </body>

</html>
复制代码

 发现平常被自己忽略的问题,于是上W3SCHOOL上仔细看了下,发现DOCTYPE属性的选择有些时候是很重要的,会造成CSS失效等多种问题:

希望可以对和我遇到相同问题的有所帮助http://www.w3school.com.cn/tags/tag_doctype.asp

 

你可能感兴趣的:(position)