CSS Hack 是实现浏览器样式兼容的兜底办法, 能不用就尽量不要使用. 但是, 针对一些浏览器的 bug, 比如老版本 IE 的 bug, 有时使用 CSS Hack 是不得已而为之的做法. 本文将详细介绍 CSS Hack.
CSS Hack 主要分为属性标记法和选择器前缀法两种:
属性标记法
[IE6-]
对于 IE6 - 浏览器主要使用下划线_和中划线 - 这两种字符
- _color:blue;
- -color:blue;
- [IE7-]
对于 IE7 - 浏览器可以使用非常多的字符, 包括 `~!@#$%^&*()=+{[]:<>,.?/
但是, 比较常用的是加号 + 和星号 *
- +color:blue;
- *color:blue;
- [IE10-]
使用后缀 \ 9 可以识别出 IE10 - 浏览器
- color:blue\9;
- [IE8+]
使用后缀 \ 0 可以识别出 IE8 + 浏览器
- color:blue\0;
- [IE9,IE10]
使用后缀 \ 9\0 可以识别出 IE9,10 浏览器
color:blue\9\0;
选择器前缀法
[IE6-]
在选择器前面添加 * html, 可以识别 IE6 - 浏览器
[注意]* 和 HTML 之间有无空格都可以生效
- *HTML div{
- color:red
- }
- [IE7]
在选择器前面添加 *+HTML, 可以识别 IE7 浏览器
[注意]*,+,HTML 之间有无空格都可以生效
- *+HTML div{
- color:red
- }
- [IE8]
在选择器外层使用 @media \0, 可以识别 IE8 浏览器
[注意]@media 和 \ 0 之间必须有空格
- @media \0{
- div{
- color:red
- }
- }
[IE9 + 及其他非 IE 浏览器]
在选择器前面添加: root, 可以识别 IE9 + 及其他非 IE 浏览器
:root div{color:red}
本文转自: https://www.cnblogs.com/xiaohuochai/p/6383384.html
来源: http://www.css88.com/web/css/16139.html