CSS在IE7、IE6和火狐下兼容的问题

  • 内容
  • 评论
  • 相关

一、CSS HACK

以下两种方法几乎能解决现今所有HACK。
1、!important
随着IE7对!important的支持,!important 方法现在只针对IE6的HACK。
(注意写法.记得该声明位置需要提前)
程序代码

[code lang="css"]

<!-- #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } -->

[/code]

2、IE6/IE77对FireFox
*+html 与 *html 是IE特有的标签,firefox 暂不支持。
而*+html 又为 IE7特有标签。
程序代码:

[code lang="css"]

<!-- #wrapper { #wrapper { width: 120px; } /* FireFox */ *html #wrapper { width: 80px;} /* ie6 fixed */ *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */ } -->

[/code]

注意,*+html 对IE7的HACK 必须保证HTML顶部有如下声明:
程序代码:

[code lang="css"]

<!--CTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dt-->

[/code]

二、万能 float 闭合(非常重要)

关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup]
将以下代码加入Global CSS 中,给需要闭合的div加上 即可,屡试不爽。
程序代码
[code lang="css"]
<!-- /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ .tdwidth{ width:300px; /*FF +width:300px; /* IE7 _width:300px; IE6 } -->
[/code]

三、其他兼容技巧(再次啰嗦)

1、FF下给 div 设置 padding 后会导致 width 和 height 增加,但IE不会。(可用!important解决)
2、居中问题。
1) 垂直居中。将 line-height 设置为 当前 div 相同的高度,再通过 vertical-align: middle. (注意内容不要换行)
2) 水平居中。 margin: 0 auto; (当然不是万能)
3、若需给 a 标签内内容加上 样式,需要设置 display: block; (常见于导航标签)
4、FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float 的 div 在 ie 下 margin 加倍等问题。
5、ul 标签在 FF 下面默认有 list-style 和 padding 。最好事先声明,以避免不必要的麻烦。(常见于导航标签和内容列表)
6、作为外部 wrapper 的 div 不要定死高度,最好还加上 overflow: hidden ,以达到高度自适应。
7、关于手形光标。 cursor: pointer ,而 hand 只适用于 IE。
8、至于IE5以及其他浏览器就没有必要兼顾了,在这上面花时间不值得。

下面这段可执行的码可以很形象的说明问题...当然前提是你有IE6 IE7和火狐浏览器...
不过我还是没有研究透...需要注意的是...在<body>标签里加了 lang="zh" 的定义...

[code lang="html"]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="<a rel="external" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>" target="_blank"><a rel="external" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a></a>">
<html xmlns="<a href="<a rel="external" href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>" target="_blank"><a rel="external" href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a></a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>通过CSS Hack 区分 FX/IE7/IE6/IE5.5/IE5</title>
<style type="text/css">
<!--

#fx {
display: none;
border: 3px double #999;
width:300px;
height:200px;
padding:10px;
}
#ie6{
display:none !important;
display:none;/*ie5*/
font-size:54px;
border:10px solid #CCC;
padding:100px;
}
#ie6/**/{
display:block;
display /*ie5.5*/:none;
}
#ie7 {
display:block !important;
display:none;/*ie5 & ie6*/
background-color:#69f;
border:1px dashed #63c;
padding:50px;
width:200px;
height:150px;

}
*:lang(zh) #ie7{
display:none !important;
}
*:lang(zh) #fx{
display:block !important;
}

-->

#example{color:red ;}
* html #example{color:blue;}
*+html #example{color:green;}
</style>
</head>

<body lang="zh">
<div id="fx">这是在 FireFox 或者 Opera 下面的效果</div>
<div id="ie6">这是在 IE 6 下面的效果</div>
<div id="ie7">这是在 IE 7 下面的效果</div>

<div>以下为简单区分FF/IE6/IE7示例</div>
<div id="example">这行文字在FF下应为红色,在IE6下应为蓝色,在IE7下应为绿色。</div>
</body>
</html>[/code]

评论

1条评论
  1. Gravatar 头像

    雅丹地貌

    支持

    [回复]

发表评论

电子邮件地址不会被公开。 必填项已用*标注

click to change 看不清?点击换一张!