网站设计让div+css兼容ie6 ie7 ie8 ie9和FireFox等浏览器的方法

时间：2013-2-14  编辑：邢台网络公司

2、margin加倍的问题
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如：
<div id=”imfloat”></div>
相应的css为
#IamFloat{float:left; margin:5px;/*IE下理解为10px*/ display:inline;/*IE下再理解为5px*/}
3、关于容器的包涵关系
　　很多时候，尤其是容器内有平行布局，例如两、三个float的div时，宽度很容易出现问题。在IE中，外层的宽度会被内层更宽的div挤破。一定要用Photoshop或者Firework量取像素级的精度。

4、关于高度的问题
　　如果是动态地添加内容，高度最好不要定义。浏览器可以自动伸缩，然而如果是静态的内容，高度最好定好。（似乎有时候不会自动往下撑开，不知道具体怎么回事）

5、最狠的手段 - !important;
　　如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下
.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}
　　值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过IE7.0对CSS的支持又有新问题。浏览器多了，网页兼容性更差了，疲于奔命的还是我们 ，为解决IE7.0的兼容问题，找来了下面这篇文章：

　　现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！搜索了一下，找到一个针对IE7不错的hack方式就是使用“*+html”，现在用IE7浏览一下，应该没有问题了。
现在写一个CSS可以这样：
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
　　那么在firefox下字体颜色显示为#333，IE6下字体颜色显示为#666，IE7下字体颜色显示为#999.
　　关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助.
div+css兼容DIV+CSS兼容 IE6 IE7 火狐
　　在区别火狐和IE时最常用的是!important方法,对于其他不同浏览器和浏览器的不同版本的的兼容性问题还有下面一些方法,比如:@import,注释,属性选择符,子对象选择符和voice-family等方法,这些方法在《css网站布局实录》中有讲述.
<<<123456>>>