div+css 解决IE 6,7,8 FF兼容问题

1. IE8下兼容问题，加如下代码就实现从IE7到IE8的兼容
   <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/>
2. float 浮动造成的IE6 下面的双倍边距问题，也是最常见的，用！important解决。如
   margin-left:10px!important；/*IE7,8 FF下是10px*/
margin-left:5px/*IE6下属性写的是5px，但是现实的是10px
3. 清除块display，可以解决浮动造成的块，但DIV背景填色或填图片的时候，会出现背景断开或差一小块，在div的css写display：block就可以解决问题
4. 通过important 会有IE FF兼容写法的不同。需要写成
   height：100px；+height：1200px
5. 当FF上出现浮动，并且div会偏离预想位置的时候，在div下清除浮动即可
6. 盒模型的问题。

• 要在body下用设置一个所有元素集合的div
• 使用绝对定位才能居中

7. 对于不同浏览器的写法不一样

• background:red /* IE7下面显示蓝色*/
• +background:blue!important；/IE7下面显示的蓝色/
• +background:green；/IE6下面显示的是绿色/

IE 6,7,8 FF 浏览器的css兼容问题

1. <metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/>
   代码解析将IE8解析成 IE7模式，所以代码就不用考虑IE8的兼容性
   background:red /*大部分浏览器有效*/， *background:black;/*对IE7有效*/， _backgroud:yellow;/*只对IE6有效*/，

• 对于大部分浏览器都对第一种写法支持

• IE7 前两种写法都支持

• IE6 三段都支持，而"_"这个写法只有IE6才认

• 三种写法都需要在头文件中进行文档申明

  <!DOCTYPEhtmlPUBLIC"-//W3C //DTDXHTML1.0Transitional//EN"

解决IE6,IE7,firefox 兼容最简单的CSSHack

使用hack在很多实践中，使用如下
`#someNode
｛
position:fixed;

position:fixed;

_position:fixed;
}
第一排是Firefox以及其他浏览器看
第二排给IE7等
第三排给IE6以及更老的版本看
hack具体用法参照 http://www.duitang.com/static/csshack.html

IE6 DIV 错位情况

1. 使用左浮动是，IE6 会出现向下移动，出现空白。因为IE6的内核默认把DIV之间的距离增加3~5px，所以在margin-left：-5px
   解决方案

• 在页面加入下面代码；在IE8下自动解析成IE7
  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

  • 对整个网站，在IIS中加入如下描述，
    <?xml version="1.0" encoding="utf-8"?> <configuration> <system.webServer> <httpProtocol> <customHeaders> <add name="X-UA-Compatible" value="IE=EmulateIE7"> </customHeaders> </httpProtocol> </system.webServer> </configuration>

• css 布局居中问题
  body{text-align:center} .#center{margin-right:auto;margin-left:auto}
  在mozilla中可能需要左右margin auto的情况

• 盒模型的解析不同

• 浮动产生的双倍距离的问题

• IE的宽度高度问题
  在IE中不认识min-这个定义，IE把正常的高度就当成最小高宽，如下解决
  .#box{ width: 80px; height: 35px;}html>body .#box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

• 页面的最小宽度
  min-width可以写如下css代码设计进行使用
  .container{minwidth:600px;width:expression(document.body.clientWidth<600?'600px':'auto');}