CSS对浏览器的兼容性问题
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 都可以解决。
?
?
