IE6,IE7与fireforx浏览器兼容性问题 ie6 fixed 兼容性

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自适应
IE6,IE7与fireforx浏览器兼容性问题 ie6 fixed 兼容性
在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.空格大小
默认字本显示问题,导致&nbsp;显示的大小不一致,当你使用了&nbsp;造成问题时请注意。

--------------------------------------------------------------------------------------------

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

  

爱华网本文地址 » http://www.413yy.cn/a/25101014/228402.html

更多阅读

声明:《IE6,IE7与fireforx浏览器兼容性问题 ie6 fixed 兼容性》为网友你的她不是我分享!如侵犯到您的合法权益请联系我们删除