div+css 解决IE 6,7,8 FF兼容问题
- IE8下兼容问题，加如下代码就实现从IE7到IE8的兼容
<metahttp-equivmetahttp-equiv="x-ua-compatible"content="IE=7"/> - float 浮动造成的IE6 下面的双倍边距问题，也是最常见的，用！important解决。如
margin-left:10px!important；/*IE7,8 FF下是10px*/
margin-left:5px/*IE6下属性写的是5px，但是现实的是10px - 清除块display，可以解决浮动造成的块，但DIV背景填色或填图片的时候，会出现背景断开或差一小块，在div的css写display：block就可以解决问题
- 通过important 会有IE FF兼容写法的不同。需要写成
height：100px；+height：1200px - 当FF上出现浮动，并且div会偏离预想位置的时候，在div下清除浮动即可
- 盒模型的问题。
- 要在body下用设置一个所有元素集合的div
- 使用绝对定位才能居中
- 对于不同浏览器的写法不一样
- background:red /* IE7下面显示蓝色*/
- +background:blue!important；/IE7下面显示的蓝色/
- +background:green；/IE6下面显示的是绿色/
IE 6,7,8 FF 浏览器的css兼容问题
-
<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 错位情况
- 使用左浮动是，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>
- 对整个网站，在IIS中加入如下描述，
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');}
