|
如果你的web站点或应用程序是供给不同的浏览器用户使用的，那么你可能就需要使用到CSS
Hack和CSS Conditional Comments，本质上CSS Conditional Comments是CSS
Hack的一种。如果你的web站点CSS不是特别复杂，用CSS
Hack就能够解决浏览器CSS兼容性问题，但是如果你的站点对用户体验要求比较高或者设计非常绚丽，用CSS Conditional
Comments(CSS 条件注释)将是你更好的选择。简单的来说，CSS Hack是通过一些特殊的字符来区分IE6/7/8以及Firefox的，CSS Conditional Comments是给不同的浏览器加载不同的CSS文件（当然，这也可以用js来做）。
一、CSS Hack
CSS Hack是通过一些特殊的字符来区别IE 6, IE 7, IE 8和Firefox的，浏览器对于不能识别的字符，将会直接过滤掉，有很多字符能够用于CSS Hack，在这里有一个非常详细的列表，下面我只列出了一些比较常用的Hack字符。
| |
IE6 |
IE7 |
IE8 |
FireFox |
| _ |
√ |
× |
× |
× |
| * |
√ |
√ |
× |
× |
| *+ html |
× |
√ |
× |
× |
| !important |
× |
√ |
√ |
√ |
| \9 |
√ |
√ |
√ |
× |
| @import ‘style.css’
@import “style.css”
@import url(style.css)
@import url(‘style.css’)
@import url(“style.css”)
|
√ |
√ |
√ |
√ |
1. _ * \9 !important
区别Firefox 和 IE 6
view source
print?
1 /*区别Firefox和IE 6*/
2 body{
3 background-color: red; /* Firefox */
4 *background-color: yellow; /* IE6/7 */
5 }
区别Firefox 和 IE 7
1 /*区别Firefox 和 IE 7*/
2 body{
3 background: orange;
4 *background: green;
5 }
区别IE 7 和 IE 6
1 /*区别IE 7 和 IE 6*/
2 /*ie7显示绿色，ie6显示蓝色*/
3 body{
4 background: green !important;
5 *background: blue;
6 }
区别IE和Firefox
1 /*区别IE和Firefox*/
2 body{
3 background-color: red; /* 所有浏览器都支持 */
4 background-color: yellow\9; /* IE6/7/8 */
5 }
区别FF/IE8/IE7/IE6
1 /*区别IE6/7/8和其他浏览器*/
2 body{
3 background-color: red; /* 所有浏览器都支持 Firefox显示红色 */
4 background-color: green\9; /* IE6/7/8 IE8显示绿色 */
5 *background-color: yellow; /* IE6/7 IE7显示黄色 */
6 _background-color: blue; /* IE6 IE6显示蓝色 */
7 }
从上述代码中，可以看出，书写CSS Hack的顺序为Firefox<IE8<IE7<IE6，由高标准向低标准走。
2.关于!important和*+html
引用：http://www./css-browser-hack/
优先度: (*+html + !important) > !important > +html
1 #bgcolor {
2 background:red !important; /* Firefox 等其他浏览器 */
3 background:blue; /* IE6 */
4 }
5 *+html #bgcolor {
6 background:green !important; /* IE7 */
7 }
|
