您的位置：首页 > Web前端 > CSS

ie678,FF,chrome的css兼容性

2016-07-05 17:57 309 查看

小知识：什么是CSS hack？

由于不同的浏览器，比如IE6、IE7、IE8、Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果。这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack，也叫写CSS hack。

各浏览器CSS hack兼容表：

!important ：IE7 、Firefox ；

_ ：IE6 ；

* ：IE6、IE7

*+：IE7 ；

\9 ：IE6、IE7 、IE8；

\0：IE8；

nth-of-type(1) ：Chrome、Safari；

代码示例：

test{
color:red; /* 所有浏览器都支持 */
color:red !important;/* Firefox、IE7支持 */
_color:red; /* IE6支持 */
*color:red; /* IE6、IE7支持 */
+color:red; /* IE7支持 */
color:red\9; /* IE6、IE7、IE8支持 */
color:red\0; /* IE8支持 */
}
body:nth-of-type(1) p{color:red;} /* Chrome、Safari支持 */

一、CSS HACK

以下两种方法几乎能解决现今所有HACK

1. !important

随着IE7对!important的支持， !important 方法现在只针对IE6的HACK。（注意写法，记得该声明位置需要提前）

test{
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}

2. IE6/IE77对FireFox

+html 与 html 是IE特有的标签，firefox 不支持，而+html 又为 IE7特有标签。

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

注意：

*+html 对IE7的HACK 必须保证HTML顶部有如下声明：

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

二、万能 float 闭合

将以下代码加入CSS 中，给需要闭合的div加上 class=”clearfix” 即可，屡试不爽。

/* 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 */

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css ie 6 firefox

相关文章推荐

新的分享

章节导航