爱华网IE6，IE7与fireforx浏览器兼容性问题及其常见解决办法
IE6，IE7与fireforx浏览器兼容性问题及其常见解决办法_【web前端设计】1.IE6，IE7，Firefox对于Hack标识区别：*标识:IE6，IE7识别，FireFox不识别；！important标识：IE7、FireFox识别，IE6不识别；_标识：IE6识别，IE7、FireFox不识别。
所以定义css时支持这三种浏览器的写法可以这样写：#top{width：80px;*width:60px; _width:100px;}
--------------------------------------------------------------------------------------------
2.css样式兼容性问题总结起来可分为三类：
第一类:大小显示不一致：如margin-left或者height双倍显示，空格显示；
第二类:位置显示不一致：如div居中显示，td默认内容位置等；
第三类:这一类比较零散，需要在特定的场景才会出现，而特定的场景往往比较复杂，所以说具体问题具体解决，找一个设置CSS样式一致的方案；
--------------------------------------------------------------------------------------------
3.margin-left 双倍显示问题
margin-left在IE下双倍显示是IE里面的一个bug，在很多情况下会出现这种情况。举一例最常见的是在两个都是float：left的DIV旁，那么margin-left在IE里显示的就是两倍的。
<div>
<div>
</div>
</div>
解决方法：通过css的Hack标识加上“！important”来标识FireFox读取这个属性值优先，二IE6不认识这个标识，所以FireFox
读取的属性是“margin-left：50px;”,而IE6则读取“margin-left:25px”，当IE6的margin-left显示双倍时，就得到了50px，从
而避开IE6的这个bug，达到两个浏览器的css样式兼容。代码改写如下：
<div>
<div>
<div>
</div>
--------------------------------------------------------------------------------------------
4.table、form、div自适应
在firefox里面，form里面的内容超出form的容量时也不会自动扩展form、table及div的内容，而在IE里，table、form或者
div里面的内容超出宽度是，则自动扩展外层的table、form及div，所以当我们从FireFox上切换到IE6时，这个问题出现的比较
多。
<table>
<tr>
<td>
<form>
<input type="text"/>
</form>
</td>
</tr>
</talbe>
解决办法：1.固定外层table、form或者div的宽度或者高度适应内层的内容：代码如下
<table>
<tr>
<td>
<form>
<input type="text"/>
</form>
</td>
</td>
2.缩小里面的内容，小于table、form或者是div的宽度或者高度
<table>
<tr>
<td>
<form>
<input type="text"/>
</form>
</td>
</tr>
</table>
--------------------------------------------------------------------------------------------
5.IE里div下的img默认有空格
这个问题一般出现在设计导航条的时候，导航条很多时候就是横向一排div，每个div里面都是图片，就会在IE下产生了多了
一点小空格的问题。
<div>
<imgsrc="img/me.gif"/>
</div>
解决方法：【1】、将div下的font-size设置为0
<d iv>
<imgsrc="img/me.gif"/>
</div>
【2】、整合div里面的内容，使其没有空格，这样也可以使内容紧凑，这里可以看IE里面没有忽略img旁边的空格导致的问题
<div>
<img src="img/me.gif"/>
</div>
--------------------------------------------------------------------------------------------
6.空格大小
默认字本显示问题，导致 显示的大小不一致，当你使用了 造成问题时请注意。
--------------------------------------------------------------------------------------------
7.IE里div默认line-height
在IE里div设置至少有一个line-height所以显示的时候IE下的div显示无法显示等于10px.
<div>
<div>
</div>
</div>
解决方法：设置div层里的字体大小为0，则div的高度可以自由设置
<div>
<div>
</div>
</div>
--------------------------------------------------------------------------------------------
8.div居中center
当设置了“margin-left:auto;margin-right:auto”后，FireFox里的可以居中显示div，而IE上则不可以显示居中。
<div>
测试div上内容显示的位置
</div>
--------------------------------------------------------------------------------------------
9.table的padding
在FireFox下，table的padding实在是太好用了，当我们转到IE6上时才发现，要改过来的痛苦，所以在使用table的padding
时请注意兼容问题。
<table>
<tr>
<td>测试Talbe的padding</td>
</tr>
</table>
解决办法：建议在td里面使用一个div，然后是设置div的margin，使其出现在td正确的位置上。
<table>
<tr>
<td>
<div>
测试Table的padding
</div>
</td>
</tr>
</table>
--------------------------------------------------------------------------------------------
10.tr和td的border
在FireFox下，显示的td的border-top的时候可以显示，而在IE6下则无法显示的问题，是td显示边框的时候会出现的问题
所以解决办法是在td里面在设置一个div来进行显示。
<table>
<tr>
<td>
</td>
</tr>
</table>
解决办法：
<table>
<tr>
<td>
<div>
</div>
</td>
</tr>
</table>
--------------------------------------------------------------------------------------------
11.width和height的计算
这个问题大部分人都会遇到
FireFox和IE下计算width和height的方法：在IE下：显示宽度=marginLeft+width+marginRight；显示高度=marginTop+
height+marginBottom;在FireFox下：显示宽度：marginLeft+paddingLeft+borderLeft+width+marginRight+paddingRight
+borderRight;显示高度=marginTop+paddingTop+borderTop+height+marginBottom+paddingBottom+boderBottom;
<div>
<divstyle="width:280px;margin-left:40px;padding-left:15px;border-width:1px20px 1px 20px;border-style:solid
;border-color:#FE871A;">
测试width
</div><br>
<divstyle="height:100px;width:200px;margin-top:40px;padidng-top:15px;border-width:20px1px 20px 1px;
border-style:solid;border-color:#CCCCCC;">
测试height
</div>
</div>
解决办法：可以选择用Hack来解决兼容性问题
<div>
<divstyle="width:225px!important;width:280px;margin-left:40px;padding-left:15px;border-width:1px20px
1px20px;border-style:solid;border-color:#FE871A">
测试width
</div><br>
<divstyle="height:45px!important:height:100px;width200px;margin-top:40px;padding-top:15px;border-width:20px
1px 20px 1px;border-style:solid;borer-color:#CCCCCC;">
测试height
</div>
</div>
--------------------------------------------------------------------------------------------
12.链接a里面的div
在FireFox链接里面放一个div是在点击链接时候会莫名奇妙的出现两个点（在FireFox3下显示的很明显），而在IE里则显示多下横线，鼠标移
过时显示的图标不一致；
<table>
<tr>
<td>
<a href="#"_fcksavedurl="#">_fcksavedurl="#">_fcksavedurl="#">
<div>
本地连接
</div>
</a>
</td>
</tr>
</table>
解决办法：在现实链接的时候设置cursor:pointer和text-decoration：underline；或者设置其他值，解决两个点的问题当然是
把链接移动外面显示才是最后的解决方式，但由于特殊需要div必须放在链接里面时，目前没有有效的解决方式
<styletype="text/css">
a:hover{cursor:pointer;}
div{text-decoration:underline;}
</style>
--------------------------------------------------------------------------------------------
13.cursor 一致
在IE中cursor：hand和cursor:pointer都显示手形，而在FireFox中，cursor:hand则显示为编辑图标，只是把它当文字处理而已，
若要在FireFox中显示手形，需设置cursor:pointer.
<span>hand</span>
<span>pointer</span>
文章所属分类：技术交流
本文地址：http://blog.sina.com.cn/s/blog_6dd5ebcb0100yz04.html
【相关文章链接:】 http://hi.baidu.com/mzxclcl/creat/blog/WebKnowledge
