这两天在想这个问题,在论坛里发的帖子,也没有人回,网上的那些答案基本上都是在IE8.0以下的版本,通过IE8.0和FF3.63版本的比较,感觉现在两者的相差不是太大,我只发现有下面一些有明显的区别.刚看了论坛里的信息,还有一种方法:下载CSS3.0手册看看,里面有各个浏览器的说明,是否兼容
第一:cursor:hand值。 在IE中可以显示手型,但是在FF中样式不作用
第二:IE和FF的透明设置不同
IE FF
比如: filter:alpha(opacity=10); opacity:.10;
第三:ul在FF中默认是有padding值的, 而在IE中只有margin默认有值 ,如果设置padding:0;
Margin:0 可以解决大多数问题,但是要说慎用,要和项目组人员讨论一下.在不设置margin和padding情况下
特别是外边距的差别很大
IE FF
第四:FireFox下连续长字段自动换行。比较的结果是,FF的背景显示会屏蔽上一行的外观效果
IE FF
可以通过下面的代码,在浏览器中看到最终的效果。还有一些区别,我自己现在还没有搞搞清楚(组合属性的差别),希望大家在实际工作中遇到别的差异的地方,也能够记录下来,来共同完善这个差别表
以下是测试的代码
<
html
>
<
head
>
<
title
>
</
title
>
<
style type ="text/css"
>
div
{
/*margin-left:auto ;
margin-right:auto ;*/
background-color : Red
;
cursor : help ;
/*FirefoxIE*/
/*float:left ;*/
display : inline ;
/*FirefoxIE*/
padding-top : 10px
;
height : 10px
;
letter-spacing : 1px ;
/**/
word-spacing : 1px ;
/**/
text-transform : uppercase
;
text-decoration : underline
;
width : 20px
;
border-width : 10px
;
filter : alpha(opacity=10) ;
/*IEFF*/
opacity : .10
;
}
</
style
>
<
script type
="text/javascript">
function
load() {
alert(document.getElementById(
"div2"
).clientWidth);
alert(document.getElementById(
"div2"
).offsetWidth);
}
</
script
>
</
head
>
<
body
>
a
<
div
>
hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world hello world
</
div
>
<
div id
="div2">
hello world
</
div
>
<
p ></ p
>
<
a href ="#"> hello </ a
>
</
body
>
</
html
>