ie678,FF,chrome的css兼容性

最新推荐文章于 2022-02-28 18:39:53 发布

PrincessofUtopia

最新推荐文章于 2022-02-28 18:39:53 发布

阅读量524

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css ie 6 firefox

本文链接：https://blog.youkuaiyun.com/niuchaoying/article/details/51833537

css 专栏收录该内容

0 篇文章

订阅专栏

小知识：什么是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 */