Keep on going, never give up.

几个IE6、IE7、FireFox上CSS兼容问题

本文总结IE6、IE7及Firefox网页设计中的兼容问题,尽管IE6已有10年历史,至今仍有大量的用户(20%左右)在使用,做前端设计的程序员不得不考虑这个用户群体。所以兼容设计还是需要的。本文概括min-width和min-height IE设置兼容问题,margin:auto水平和垂直居中问题,margin和padding尺寸计算问题,还有高度自适应问题等常见兼容问题。

一、min-width和min-height

IE6不支持此属性,后续新版本IE及Firefox均支持

兼容写法(示例高度500px):

.myStyle {
min-height:500px;
height:auto !important;
height:500px;
overflow:visible;
}

IE6不支持!important属性,所以无法解析前一个height定义,后一个height属性就会生效(顺序必须先写!important定义部分),Firefox刚好相反,会优先解析!important定义属性(下同)。min-width类似处理。

二、margin:auto元素居中

1、水平居中:

.myDiv {
margin:0 auto 0 auto !important;
margin:0 auto;
}

第一个margin针对Firefox会自动元素居中,后一个针对IE生效。Firefox上可以居中,但是IE则不行,兼容办法:

为IE修改DOCTYPE为:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

还可以,通过body {text-align:center;}居中元素。

2、垂直居中:

如果是表格,使用vertical-align:middle就可以了。Firefox上设置height和line-height相同值时会自动垂直居中。而IE上则要添加一些冗余属性,示例如下:

#wrapper {
 border:1px solid #ccc;
 width:400px;
 height:200px;
 text-align:center;
 line-height:200px;  //Vertical Align For IE7 & Firefox
 _font-size:120px;  //Vertical Align For IE6
}
#wrapper a {
 display:-moz-inline-block;  //For Firefox 2(-)
 display:inline-block;  //For Firefox 3 & IE6, 对于IE6来说其实相当于zoom:1, 仅仅是给elem一个layout。
       //注意:支持display:inline-block的浏览器有:Firefox3,Safari,Opera
 margin:0 auto;  //For Firefox 2(-)
 width:80px;
 height:20px;
 font:11px/20px arial;
 background:red;
}

本段代码来源:http://hi.baidu.com/5fad_01/blog/item/2049e3de7f8abe5194ee3747.html

更多关于SPAN排列问题:

CSS中如何把Span标签设置为固定宽度

三、width、height与margin、padding尺寸

对同一元素而言,Firefox中margin、pading属性结果同样计算在width和height中,而IE则不算。假设要定位宽度为500,高度为300,margin为10,padding为5的元素,代码如下:

IE:

.myDiv {
width:500px;
height:300px;
margin:10px;
padding:5px;
}

FIREFOX:

.myDiv {
width:470px;
height:270px;
margin:10px;
padding:5px;
}

合并后,如下:

.myDiv {
width:470px !important;
width:500px;
height:270px !important;
height:300px;
margin:10px;
padding:5px;
}

四、高度自适应问题

在Firefox上,设置overflow:hidden(不要设置height),即可实现元素的高度自适应,但如果元素内嵌float元素时,IE就无法高度自动,兼容方法如下:

设置zoom:1;属性,兼容示例:

.myDiv{
overflow:hidden;
zoom:1;
margin:5px auto;
}

五、Div 1px 2px高度问题

当设置DIV高度为1px 2px很小高度时,FIREFOX会显示正常,但是IE则高度变大,兼容方法如下:

设置font-size:0px;

.myDiv{
    background: #CCC;
    height: 2px;    
    font-size: 0px;
}

或,设置overflow:hidden。

.myDiv{
    background: #CCC;
    height: 2px;    
   overflow: hidden;
}

六、善用!important和<!--[if IE 6]>xxx<![endif]-->

示例:

.myDiv {
background-color:#FF0000 !important;
background-color:#00FF00;
}

<!--[if IE 6]>
body{
background-color:#0000FF;
}
<![endif]-->

但是,上文的!important从IE7开始已经支持,所以使用时还需考虑后续IE789跟IE6之间的显示差异,可以通过如下代码解决:

.myDiv{backgroud:#555;}/*Moz*/
*html#1{backgroud:#666;}/*IE6*/
*+html#1{backgroud:#777;}/*IE7*/

更多关于IE版本定义(来源:http://bbs.blueidea.com/thread-2847109-1-1.html):

1. <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]-->

2. <!--[if IE]> 所有的IE可识别 <![endif]-->

6. <!--[if IE 6]> 仅IE6可识别 <![endif]-->

7. <!--[if lt IE 6]> IE6以及IE6以下版本可识别 <![endif]-->

8. <!--[if gte IE 6]> IE6以及IE6以上版本可识别 <![endif]-->

9. <!--[if IE 7]> 仅IE7可识别 <![endif]-->

10. <!--[if lt IE 7]> IE7以及IE7以下版本可识别 <![endif]-->

11. <!--[if gte IE 7]> IE7以及IE7以上版本可识别 <![endif]-->

注意: IE都能识别*,其它浏览器不能识别*。IE6能识别_,其他浏览器不能识别。比如:

*html .myDiv{ _font-size:20px;...}

七、其它兼容问题

1、cursor:hand在Firefox无法识别

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

2、IE上显示透明24位PNG有背景

目前感觉是比较理想的办法,是通过fixpng JS脚本解决。具体可参考:

http://www.ediyang.com/dd_belatedpng-best-way-support-ie6-png/

参考资料:

http://hi.baidu.com/jxqlovejava/blog/item/8232c0b7efdf886b8bd4b2f3.html

http://cssshare.com/1/ie-bugxi-lie-14-she-zhi-1pxhuo-2pxde-xiao-gao-du

http://www.poorren.com/css-ie-ff-margin-padding/

更多文章:

CSS列表样式list-style演示示例

CSS中如何把Span标签设置为固定宽度

定义CSS风格实现图片的半透明效果

HTML5元素标记一览及用法介绍

HTML5新特性及标签标记概要

HTML标记一览表及用法说明 

相关评论(0):  

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

订阅博客

最新文章

本站采用创作共用版权协议, 要求署名、非商业用途和保持一致. 转载也必须遵循“署名-非商业用途-保持一致”的创作共用协议. 返回顶部
Copyright@2005-2016 Metsky.com, All rights Reserved.