IE6/IE7/IE8/Firefox的CSS兼容性问题
当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE6、IE7、IE8与Fireofx的兼容性处理方法并整理了一下。对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加DOCTYPE声明。
各种常见浏览器使用的内核 (Rendering Engine)
Mozilla Firefox ( Gecko )
Internet Explorer ( Trident )
Opera ( Presto )
Konqueror ( KHTML )
Safari Swift ( WebKit )
1. float 。
(1) 外置
.main{ float:left;#float:none;_float:none; }
html*.main{ float:left;#float:none;_float:none; }
*+html .main{ float:left;#float:none;_float:none; }
* html .main{ float:left;#float:none;_float:none; }
第1行给Firefox以及其他浏览器看;
第2行给Safari/IE6/iE7看，如果safari/IE6/iE7 视觉效果不统一，就要在后面跟IE6/IE7的定义;
第3行给IE7看;
第4行给IE6以及更老的版本看;
(2) 内置
.main{ float:left;
#float:none;
_float:none;
[float:none;]float:none;
}
第1个float给Firefox以及其他浏览器看;
第2个加#的float给IE7看;
第3个加_的float给IE6以及更老的版本看;
第4个加[的float给safari看;
第5个加]的float给IE看 ;
2. 用css自动隐藏超出宽度内容并省略显示，浏览器兼容ie、ff 。
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-icab-text-overflow: ellipsis;
-khtml-text-overflow: ellipsis;
-moz-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
基本非IE的浏览器的私有属性都会以-xxx-这样开始，
-o-就是以Presto为引擎的 Opera私有的；
-icab-是iCab私有的；
-khtml-就是以KHTML为引擎的浏览器（如Konqueror Safari）；
-moz-就是以mozilla的Gecko为引擎的浏览器（如Firefox，mozilla）；
-webkit-就是以Webkit 渲染引擎（是KHTML的衍生产品）的浏览器（如Safari、Swift）。
并不是说像-moz-text-overflow现在有用，而是一个幻想的写法，当一个浏览器的开发人员决定在浏览器支持一种还没得到公认的属性时，一般都会在属性的前面加上-xxx-这种，表明这种是属于该浏览器私有的属性，当然，这些属性多数来自CSS3的，使用这样的写法在浏览器升级后也许才有作用.
3. IE、Firefox、Opera和Safari对CSS样式!important和*的支持。
(1) IE6、IE7都支持 *，但IE8终于回归正统，放弃了对*的支持;
(2) IE7、IE8、Firefox、Opera、Safari都支持 important;
!important的优先级要高.
举例说明：
<style type=”text/css”>
body
{
background-color:#FF0000 !important;
*background-color:#00FF00 !important;
*background-color:#0000FF;
background-color:#000000;
}
</style>
IE6选择最后一个，即：background-color:#000000; （因为IE6对important不支持）；
IE7选择第二个，即：background-color:#00FF00;（因为IE7开始对important支持了，同时还死守着它对 * 感情的最后一版本，但important并未起到优先级的作用）；
IE8和Firefox、Opera、Safari选择第一个，即：background-color:#FF0000 !important;（IE8完全支持于important，同时丢弃了对*的感情）；
另外再补充一个，下划线”_“,IE6支持下划线，IE7、IE8和Firefox、Opera、Safari均不支持下划线。
FF与IE
1. IE,FF的默认值问题。
或许你一直在抱怨为什么要专门为IE和FF写不同的CSS.关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。
我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，div或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。
所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定。
2. IE6下容器的宽度和FF解释不同。
<?xml version="1.0" encoding="gb2312"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div{
cursor:pointer;
width:200px;
height:200px;
border:10px solid red
}
-->
</style>
<div onclick="alert(this.offsetWidth)">web标准常见问题大全</div>
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内,这里IE6解释为200PX ,而FF则解释为220PX,那究竟是怎么导致的问题呢？大家把容器顶部的xml去掉就会发现原来问题出在这,顶部的申明触发了IE的qurks mode,关于qurks mode、standards mode的相关知识,请参考:
[url]http://www.microsoft.com/china/msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true[/url]
3. BOX模型解释不一致问题。
在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：
div{ margin:30px!
!important;margin:28px;
}
注意这两个 margin的顺序一定不能写反， !important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： div {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写
margin:xx px!important;
#box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0}
#box{width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
4. Firefox 关于DIV高度无法自适应的两种解决。
如果设置了一个DIV的高度，当DIV里实际内容大于所设高度，ie会自动拉伸以适应DIV容器大小，ff会固定DIV的高度，超过部分超出DIV底线以外，出现和下面的内容重叠的现象。如果不给DIV设置高度，在Firefox中将不回因为里面的内容而撑开，而IE中就会自动根据内容撑开。
解决方案：
(1) 在DIV内部的最后追加clear:both样式
<div style="background-color:#FF0000;">
<div style="float:left; height:200px">Jmedia Design</div>
<div style="float:right; height:800px">www.jmedia.cn</div>
<div style="clear:both"></div>
</div>
(2) 对DIV使用overflow:auto；
<div style="overflow:auto;">
<div style="float:left; background-color:#000000;height:200px">1111111111</div>
<div style="float:right;background-color:#000000; height:300px"">2222222222</div>
</div>
5. 总结
浏览器多了，网页兼容性更差了，疲于奔命的还是我们 ，为解决IE7.0的兼容问题，找来了下面这篇文章： 现在我大部分都是用!important来hack，对于ie6和firefox测试可以正常显示，但是ie7对!important可以正确解释，会导致页面没按要求显示！下面是三个浏览器的兼容性收集.
第一种，是CSS HACK的方法
height:20px; /*For Firefox*/
*height:25px; /*For IE7 & IE6*/
_height:20px; /*For IE6*/
注意顺序。这样也属于CSS HACK，不过没有上面这样简洁。
#example { color: #333; } /* Moz */
* html example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */
<!--其他浏览器 -->
<link rel="stylesheet" type="text/css" href="css.css" />
<!--[if IE 7]>
<!-- 适合于IE7 -->
<link rel="stylesheet" type="text/css" href="ie7.css" /> <![endif]-->
<!--[if lte IE 6]>
<!-- 适合于IE6及一下 -->
<link rel="stylesheet" type="text/css" href="ie.css"
<![endif]-->
第三种，css filter的办法。
新建一个css样式如下：
#item {width: 200px; height: 200px; background: red; }
新建一个div,并使用前面定义的css的样式：<div id="item">some text here</div>
在body表现这里加入lang属性,中文为zh： <body lang="en">
现在对div元素再定义一个样式：
*:lang(en) #item{ background:green !important; }
这样做是为了用!important覆盖原来的css样式,由于:lang选择器ie7.0并不支持,所以对这句话不会有任何作用,于是也达到了ie6.0下同样的效果,但是很不幸地的是,safari同样不支持此属性,所以需要加入以下css样式：
#item:empty {background: green !important }
:empty选择器为css3的规范,尽管safari并不支持此规范,但是还是会选择此元素,不管是否此元素存在,现在绿色会现在在除ie各版本以外的浏览器上。对IE6和FF的兼容可以考虑以前的!important 个人比较喜欢用。
Q1. Div居中问题
div设置 margin-left, margin-right 为 auto 时已经居中，IE 不行，IE需要设定body居中，首先在父级元素定义text-algin: center;这个的意思就是在父级元素内的内容居中。
Q2.链接(a标签)的边框与背景
a 链接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了避免底边显示错位, 若不设 height, 可以在 menubar 中插入一个空格。
Q3. 游标手指cursor
cursor: pointer 可以同时在 IE、FF 中显示游标手指状， hand 仅 IE 可以。
Q4.UL的padding与margin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题.
Q5. FORM标签
这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后面就不会为这个头疼了.
Q6.属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的。
Q7. FF下文本无法撑开容器的高度。
标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义:
Code:
{
height:auto!important;
height:200px;
min-height:200px;
}
Q8.IE6无法定义1px左右高度的容器。
IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,
例如:overflow:hidden | zoom:0.08 | line-height:1px
Q9. IE6的双倍边距BUG。
浮动后本来外边距10px,但IE解释为20px,解决办法是加上display: inline
Q10.IE6下为什么图片下有空隙产生
解决这个BUG的方法也有很多,可以是改变html的排版,或者设置img 为display:block 或者设置vertical-align 属性为 vertical-align:top | bottom |middle |text-bottom 都可以解决。
分享到：
相关推荐
CSS的浏览器兼容性问题主要体现在滤镜、透明度、伪类支持和其他选择器的使用等方面。例如，CSS滤镜是微软的独家特性，主要在IE内核的浏览器中得到支持。而对于透明度，IE6不支持图片的半透明效果，而其他浏览器则...
在网页设计领域，CSS（Cascading ...总的来说，处理CSS兼容性问题需要对各种浏览器的特性有深入理解，并掌握一定的技巧和工具。通过学习和实践，我们可以更好地应对这些挑战，创建出在多种浏览器下都能完美展现的网页。
总结，"CSS浏览器兼容性速查"是开发者解决问题的关键工具，通过理解和掌握不同浏览器对CSS的支持情况，我们可以编写出既能展示美观设计，又能保证兼容性的代码，从而提升用户体验。这需要不断学习和实践，随着浏览器...
* 针对多种浏览器分别配置合适的 CSS 文件，再通过判断浏览器选择不同 CSS 实现兼容性 * 使用 <!--[endif]--> 等方法来区分不同浏览器 CSS 在不同浏览器中的兼容问题是一个复杂的问题，需要认真对待和解决。通过...
在软件开发领域，尤其是网页设计和前端开发中，CSS（层叠样式表）设计的浏览器兼容性问题是开发者经常面临的一大挑战。不同的浏览器可能对CSS的支持程度不同，这导致了在不同浏览器下页面显示效果的差异。理解并解决...
CSS技巧汇总---div+CSS浏览器兼容问题整理(IE6.0、IE7.0 ,ie8 , FireFox...).pdf
以下是一些常见的CSS浏览器兼容性问题及其解决方案： 1. **垂直居中问题**： 在CSS中，要实现一个div的垂直居中，可以使用`vertical-align: middle;`和`line-height`属性。但这种方法要求内容不换行。例如： ```...
在网页设计中，CSS（层叠样式表）的浏览器兼容性问题是一大挑战，尤其是在处理老版本的Internet Explorer（如IE7和IE8）时。本文主要针对这些兼容性问题提供一些解决策略。 首先，针对IE7和IE8的兼容性，一种常见的...
CSS浏览器兼容性问题解决方案 CSS浏览器兼容性问题是Web开发中常见的问题。不同的浏览器对CSS的解析方式不同，这就导致了浏览器之间的兼容性问题。了解浏览器的兼容性问题是非常重要的，为此，我们总结了一些常见的...
本文将从标题和描述出发，详细探讨在实际开发中常见的CSS浏览器兼容性问题及其解决方案。 #### 二、CSS与浏览器兼容性的基本概念 **1. 什么是浏览器兼容性？** 浏览器兼容性是指网页能够在不同类型的浏览器中正确...
浏览器兼容性问题一直是Web开发中的一个关键挑战，尤其是在CSS样式表现方面。由于不同的浏览器使用了不同的渲染引擎（或称为内核），例如Mozilla Firefox使用Gecko，Internet Explorer使用Trident，Opera使用Presto...
浏览器兼容性问题主要源于不同浏览器对Web标准的实现不一致，尤其是在早期Web发展的阶段，各大浏览器厂商如Internet Explorer、Firefox、Safari、Chrome等都有自己的内核和解析规则，导致在不同浏览器上展示同一网页...
综上所述，CSS3的`border-image`是一个创新且灵活的属性，但因为浏览器兼容性的限制，实际应用时需要额外的适配工作。在考虑使用这个特性时，需要充分了解其工作原理和潜在问题，才能充分发挥其潜力。
解决CSS兼容性问题需要对各种浏览器的解析差异有深入理解，同时利用条件注释、CSS Hack以及新的CSS规范来确保在多种浏览器下的正确渲染。通过不断学习和实践，开发者可以更好地应对这些挑战，构建出更优秀的跨浏览器...
【CSS浏览器兼容性处理】 在Web开发中，CSS（层叠样式表）是用于控制网页元素样式的关键技术。然而，不同的浏览器对CSS的理解和解析方式存在差异，这可能导致在某些浏览器下网页显示不正常。特别是在使用div+css...
浏览器兼容性问题主要由于浏览器引擎的bug、网页标准的更新以及不同浏览器对标准的不同实现导致。 在描述中提到的几个关键问题如下： 1. **怪异盒模型**：在IE6及以下版本中，浏览器使用了不同的盒模型，即怪异盒...
资源名称：浏览器兼容性问题简介内容简介：浏览器兼容性问题分类浏览器的“模式”如何编写具有良好兼容性的网页显示问题：CSS兼容性height/width, position:fixed, …脚本问题：Java ｓｃｒｉｐｔ 兼容性DOM, Date....
浏览器兼容性问题一直是Web开发中的一个关键挑战，尤其是在构建跨平台、多设备的网页时。黄昊在WebRebuild北京第一届交流会上所分享的《浏览器兼容性问题简介》揭示了这些问题的核心及其解决策略。 首先，浏览器...