CSS对浏览器的兼容性有关问题
日期：2014-05-17 浏览次数：21248 次
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; //fo
