关于IE和火狐浏览器样式不兼容的一些总结

什么是浏览器兼容：当我们使用不同的浏览器（Firefox IE7 IE6）访问同一个网站，或者页面的时候，会出现一些不兼容的问题，有的显示出来正常，有的显示出来不正常，我们在编写CSS的时候会很恼火，刚修复了这个浏览器的问题，结果另外一个浏览器却出了新问题。而兼容就是一种办法，能让你在一个CSS里面独立的写支持不同浏览器的样式。

1. cursor: pointer 可以同时在 IE、 FF 中显示游标手指状， hand 仅 IE 可以

2. CSS+DIV的兼容性问题

在网站设计的时候，应该注意css样式兼容不同浏览器问题，特别是对完全使用DIVCSS设计的网，就应该更注意IE6IE7FF对CSS样式的兼容，不然，你的网可能出去不想出现的效果！

所有浏览器通用height:100px;

IE6专用_height:100px;

IE6专用*height:100px;

IE7专用*+height:100px;

IE7、FF 共用 height: 100px !important;

3. FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决)

margin加倍的问题。

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案是在这个div里面加上display:inline;

例如：

<#divid=\”imfloat\”>

相应的css为

#IamFloat{

float:left;

margin:5px;/*IE下理解为10px*/

display:inline;/*IE下再理解为5px*/}

4、最狠的手段 -!important;

如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下.tabd1{

background:url(/res/images/up/tab1.gif)no-repeat0px0px!important;/*StyleforFF*/

background:url(/res/images/up/tab1.gif)no-repeat1px0px;/*StyleforIE*/}

值得注意的是，一定要将xxxx !important 这句放置在另一句之上；

5、兼容代码:兼容最推荐的模式。

/*FF*/

.submitbutton{

float:left;

width:40px;

height:57px;

margin-top:24px;

margin-right:12px;

}

/*IE6*/

*html.submitbutton{

margin-top:21px;

}

/*IE7*/

*+html.submitbutton{

margin-top:21px;

}

6.浮动ie产生的双倍距离

#box{float:left;width:100px;margin:000100px;//这种情况之下IE会产生200px的距离display:inline;//使浮动忽略}

这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);

#box{display:block;//可以为内嵌元素模拟为块元素display:inline;//实现同一行排列的的效果Diplay:table;

7. IE6的双倍边距BUG

body{margin:0}

div{float:left;margin-left:10px;width:200px;height:200px;border:1pxsolidred}

</style>

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

8. firefox嵌套div标签的居中问题的解决方法

　假定有如下情况：

<divid="a">

<divid="b"></div>

</div>

如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。

解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin:0 auto;。

关于IE和火狐浏览器样式不兼容的一些总结

相关推荐