CSS Hack 学习与总结

最新推荐文章于 2021-08-03 20:45:38 发布

difan5495

最新推荐文章于 2021-08-03 20:45:38 发布

阅读量97

点赞数

原文链接：http://www.cnblogs.com/heimirror/archive/2011/11/04/2234327.html

版权

最近工作写CSS比较多，写完之后发现问题很多，尤其是浏览器兼容问题，现将学到的和一些总结的写下来。

1、什么是CSS

Cascading Style Sheets(层叠样式表)的简称.

一种标记语言,它不需要编译,可以直接由浏览器解释执行(属于浏览器解释型语言).

在标准网页设计中负责网页内容的表现.

例如 background-color: red; 被描述的元素的背景颜色为红色。

2、CSS Hack 是什么

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

这个针对不同的浏览器写不同的CSS code的过程，就叫CSS hack!

3、CSS Hack 分类

1、CSS类内部Hack

* _ !important等

2、选择器Hack

* html和 *+html等

3、HTML头部引用Hack(if IE)

<!--[if IE 8]>引入CSS<![endif]—>

4、CSS Hack 都有哪些

以下列出一些css hack用到的符号，并不是所有，只是当前用这些就足够了。

CSS Hack	IE6	IE7	IE8	火狐/chrome等
*	√	√	X	X
!important	X	√	√	√
-	√	X	X	X
_	√	X	X	X
+	√	√	X	X
\9	√	√	√	X
\0	X	X	√	X

*注意写法(多数情况下是将hack写在正常CSS属性的下面)

5、区分IE与其他浏览器

.class {
color:#F00;
color:#FFFFFF\9;
}

在IE下文字颜色为白色。
在火狐及chrome下文字颜色为红色。

6、区分IE6与其他浏览器

.class {
background-color:#F00;
_background-color :#FFFFFF;
}
只有IE6能够识别 _

在IE6下背景颜色为白色。
在其他浏览器下背景颜色为红色。

7、支持IE6 & IE7的写法

.class {
background-color:#F00;
+background-color :#FFFFFF;
}

在IE6、IE7下背景颜色为白色。
在其他浏览器下背景颜色为红色

8、选择器Hack的使用

    #test
    {
       width: 300px;
        height: 300px;
        border: 3px solid #0f0;
    }

    *html #test
    {
        background-color: #eee;   //IE6下可识别
    }

    *+html #test
    {
        background-color: #000; //IE7下可识别
    }

9、HTML头部引用Hack(if IE)

工作中用到的


<!--[if IE]> 、<!--[if !IE]> 、<!--[if !IE]>

10、在所有浏览器实现inline-block

在做导航条的时候，一般会用到ul li结构，大多数时候我是把li设置为浮动(float=left)，让其并排显示在同一行，最后再清除浮动(clear:both)防止影响后面的元素。另外一种方法 display:inline-block, ie6和ie7并不完全支持inline-blockli{display:inline-block;} IE6/7下无效li{display:inline-block; *display:inline;zoom:1;} 开启haslaout

内部PPT文件

转载于:https://www.cnblogs.com/heimirror/archive/2011/11/04/2234327.html