CSS hack 指各版本及各品牌浏览器之间对 CSS 解释后出现网页内容的误差 (比如我们常说错位) 的处理. 下面本篇文章就来给大家介绍一下 CSS hack, 希望对大家有所帮助.
什么是 CSS hack?
由于不同厂商的浏览器, 比如 Internet Explorer,Chrome,Mozilla Firefox,Safari 等, 或者是统一厂商的浏览器的不同版本, 比如 IE6 和 IE7, 对 CSS 的解析和认识不完全一样, 因此会导致生成的页面效果不一样, 得不到我们所需要的页面效果.
这个时候, 我们就需要针对不同的浏览器, 去写不同 CSS, 让它能够同时兼容不同的浏览器, 能在不同的浏览器中, 也能得到我们想要的页面效果.
这个针对不同的浏览器写不同的 CSScode 的过程, 就叫 CSShack!
为什么要用 CSS Hack 呢?
简单的说, CSS Hack 的目的, 就是使你的 CSS 代码兼容不同的浏览器. 当然, 我们也可以反过来利用 CSS Hack 为不同版本的浏览器定制编写不同的 CSS 效果.
原理:
由于不同的浏览器对 CSS 的支持和解析结果不一样, 还由于 CSS 中的优先级关系, 我们就可以根据这个来针对不同的浏览器来写不同的 CSS.
CSS Hack 大致有 3 种表现形式:
注意: CSS Hack 主要针对类内部 hack.
1, 属性前缀法(CSS 类内部 Hack)
比如 IE6 能识别下划线 "_" 和星号 "",IE7 能识别星号"", 但不能识别下划线, IE6-IE10 都认识 "\9", 而 Firefox 这三个都不能认识.
对于书写顺序的关系, 一般是将识别能力强的浏览器的 CSS 写在后边
- <style>
- div{
- background:green;/*forfirefox*/
- *background:red;/*forIE6 IE7*/
- }
- </style>
这样的话, 就成功的对 IE6,7 成功的做了一个 hack.
2, 选择器前缀法(选择器 Hack)
语法是这样的:<hack> selector{ sRules }
例如: IE6 能识别 * html .class{} , IE7 能识别 +HTML .class{}或: first-child+HTML .class{}
例如: 针对 IE9 的 hack 可以这么写:
- :root .test
- {
- background-color:green;
- }
3,IE 条件注释法(HTML 头部引用 Hack), 针对所有 IE(注: IE10 + 已经不再支持条件注释)
HTML 头部引用就比较特殊了, 类似于程序语句, 只能使用在 HTML 文件里, 而不能在 CSS 文件中使用, 并且只有在 IE 浏览器下才能执行, 在其他浏览器下面会被当做注释视而不见.
比如:
- <!- 默认先调用 CSS.CSS 样式表 ->
- <link rel="stylesheet" type="text/css" href="css.css" />
- <!-[if IE 7]>
- <!- 如果 IE 浏览器版是 7, 调用 ie7.CSS 样式表 ->
- <link rel="stylesheet" type="text/css" href="ie7.css" />
- <![endif]->
- <!-[if lte IE 6]>
- <!- 如果 IE 浏览器版本小于等于 6, 调用 IE.CSS 样式表 ->
- <link rel="stylesheet" type="text/css" href="ie.css" />
- <![endif]->
注:
lte: 就是 Less than or equal to 的简写, 也就是小于或等于的意思.
lt : 就是 Less than 的简写, 也就是小于的意思.
gte: 就是 Greater than or equal to 的简写, 也就是大于或等于的意思.
gt : 就是 Greater than 的简写, 也就是大于的意思.
! : 就是不等于的意思, 跟 JavaScript 里的不等于判断符相同.
- <!--[if IE]>IE 浏览器显示的内容<![endif]-->
- <!--[if lt IE6]>只在 IE6 及以下版本显示的内容<![endif]-->
这类 hack 不仅对 CSS 生效, 对写在判断语句里边的所有代码都会生效
还有在属性值后面添加 "!important" 的写法只有 IE6 不能识别, 其它版本 IE 及现代浏览器都可以识别, 例如:
background-color:green!important;
来源: http://www.css88.com/qa/css3/12788.html