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

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

 <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>

运行发现在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:fixed; 在IE9下无效果的问题的更多相关文章

  1. opacity在IE6~8下无效果,解决的办法

    opacity在IE6~8下无效果,解决的办法 问题出现时rgba()在ie6下不出效果,最后查到是opacity的问题. opacity是css3时出现的,目前主流浏览器都支持.but老IE是个麻烦 ...

  2. ios position:fixed 上滑下拉抖动

    ios position:fixed 上滑下拉抖动 最近呢遇到一个ios的兼容问题,界面是需要一个头底部的固定的效果,用的position:fixed定位布局,写完测试发现安卓手机正常的,按时ios上 ...

  3. 模态框在IE下的问题,即position:fixed在IE下不兼容的处理方式

    项目中遇到的问题,模态框在IE下总出现如图所示双层遮罩框,经排查发现是由于bootstrap里写的modal的样式里position:fixed不兼容IE的原因,导致铺不满整个窗口. 解决方案:在项目 ...

  4. 通过定位position="fixed"实现网页内容的固定层效果

    在网页的顶部或者底部导航栏中经常需要使用到固定层的效果,即紧挨浏览器窗口的顶部或底部而网页其他内容的影响. 一.实现 主要通过设置导航栏元素的位置属性position="fixed" ...

  5. 让IE6兼容position:fixed

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 修正IE6不支持position:fixed的bug(转)

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天我做自己的博客模板的时候,遇到了这个问题.当时就简单的无视了IE6— ...

  7. IE6不支持position:fixed的解决方法

    解决IE6不支持position:fixed的方法,非常简单,具体调用请参考下面: /*让position:fixed在IE6下可用! */ .fixed-top /* 头部固定 */{positio ...

  8. 让IE6也支持position:fixed

    众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著.前些天遇到了这个问题.当时就简单的无视了IE6,但是对于大项目或商业网站, ...

  9. 元素设置position:fixed属性后IE下宽度无法100%延伸

    元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...

随机推荐

  1. [bzoj2229][Zjoi2011]最小割_网络流_最小割树

    最小割 bzoj-2229 Zjoi-2011 题目大意:题目链接. 注释:略. 想法: 在这里给出最小割树的定义. 最小割树啊,就是这样一棵树.一个图的最小割树满足这棵树上任意两点之间的最小值就是原 ...

  2. Ubuntu 16.04安装Memcached(单机)

    Ubuntu 16.04安装Memcached,不过不仅限与Ubuntu,可以用CentOS等去安装,只不过测试时使用的是Ubuntu机器.Windows下不建议使用,本机调试可以使用,线上环境除了W ...

  3. how to read openstack code

    本文的目的不是介绍openstack.我们这里假设你已经知道了openstack是什么,能够做什么.所以目的是介绍如何阅读openstack的代码.通过读代码来进一步学习openstack. 转载要求 ...

  4. Why It is so hard to explain or show some thing

    Why it is hard to explain something or learn something? For example, when I first know the hadoop, I ...

  5. [React] Validate Compound Component Context Consumers

    If someone uses one of our compound components outside the React.createContext <ToggleContext.Pro ...

  6. SQL语句小结

    1.创建数据库 create database 数据库名 2.删除数据库 drop  database 数据库名 3.创建表 1>.create table 表名 (col1 type1 [no ...

  7. Sping框架的IOC特性 悲观锁、乐观锁 Spring的AOP特性

    Sping框架的IOC特性 IOC(Inversion of Control):控制反转 以下以课程与老师的安排来介绍控制反转. 一个合理的课程编排系统应该围绕培训的内容为核心,而不应该以具体的培训老 ...

  8. iOS单例设计模式具体解说(单例设计模式不断完好的过程)

    在iOS中有非常多的设计模式,有一本书<Elements of Reusable Object-Oriented Software>(中文名字为<设计模式>)讲述了23种软件设 ...

  9. ubuntu12.04安装NVIDIA显卡驱动和CUDA

    1.安装显卡驱动 vim /etc/modprobe.d/blacklist.conf #编辑该文件 blacklist nouveau #行末添加,禁用原来的显卡驱动 apt-get install ...

  10. Tomcat 6.x Perm区内存泄露问题

    Tomcat 6.x JSP文件最后改动时间大于当前系统时间导致Perm区内存泄露问题(java Memory pool CMS Perm Gen) 出现场景: 因为測试业务,须要模拟跨天測试,所以一 ...