浏览器的兼容性一直是个头疼的问题, 使用 "欺骗" 技术可使各个浏览器效果一致, 花了些时间整理了各个浏览器的 HACK, 主要包括 IE 系列和最新版本的 Chrome,Safari,Firefox, Opera, 比较全面的记录下 Hack, 内容包括 3 部分: 媒体查询 hack, 属性 Hack, 选择器 Hack, 这些 Hack 已经测试并得到有效运用, 有需要的同学可以放心使用, 笔者会在以后不断的更新, 如果有需要补充或者修改的, 欢迎大家指教!
以下代码之间的空格是必要的, 缺少空格导致失效
/*--------------------------------- 媒体查询 hack [[---------------------------------*/
@media screen\9{...}
@media \0screen{...}
@media \0screen\,screen\9{...}
@media screen\0{...}
@media screen and (min-width:0\0){...}
@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){...}
@media all and (min-width:0){...}
@media screen and (-webkit-min-device-pixel-ratio:0){...}
@media all and (-webkit-min-device-pixel-ratio:10000),not all and (-webkit-min-device-pixel-ratio:0){...}
@-moz-document url-prefix(){...}
如:
<p class="class">@hack@hack@hack@hack@hack@hack</p>
<style type="text/CSS">
@media all and (min-width:0){ /* 在 IE9 文本颜色为红色 */
.class{color:#F00;}
}
@media screen and (-webkit-min-device-pixel-ratio: 0) { /* 在 Chrome,Safari 中文本颜色为绿色 */
.class{color:#0F0;}
}
@media all and (-webkit-min-device-pixel-ratio: 10000), not all and (-webkit-min-device-pixel-ratio: 0) { /* 在 Opera 中文本颜色为蓝色 */
.class{color:#00F;}
}
@-moz-document url-prefix() { /* 在 Firefox 中文本颜色为品红色 */
.class{color:#F0F;}
}
</style>
/*--------------------------------- 媒体查询 hack ]]---------------------------------*/
/*--------------------------------- 选择器 hack [[---------------------------------*/
/* 只支持 IE7 */
html* 选择器 {}
/* 仅支持 IE7 使用该选择器需要 HTML 顶部有声明:<!DOCTYPE HTML ......>*/
*+html 选择器 {}
/* 只支持 IE6 */
*html 选择器 {}
如:
<p class="class"> 选择器 hack 选择器 hack 选择器 hack 选择器 hack 选择器 hack 选择器 hack</p>
html* .class{color:#F00;} /* 在 IE7 中文本颜色为红色 */
*+html .class{color:#0F0;} /* 在 IE7 中文本颜色为绿色 */
*html .class{color:#00F;} /* 在 IE6 中文本颜色为蓝色 */
/*--------------------------------- 选择器 hack ]]---------------------------------*/
/*--------------------------------- 属性 hack [[---------------------------------*/
/* 只支持 IE6,7,8,9,10 */
选择器 {属性: 属性值 \ 9;}
/* 只支持 IE8,9,10 */
选择器 {属性: 属性值 \ 0;}
/* 支持 IE8 的部分属性值, 完全支持 IE9,10 */
选择器 {属性: 属性值 \ 9\0;}
/* 仅支持 IE7 和 IE6 */
选择器 {* 属性: 属性值;}
/* 只支持 IE6 */
选择器 {_属性: 属性值;}
/* 只不支持 IE6 */
选择器 {属性: 属性值! important;}
/* 仅支持 Safari 和 Chrome , 且只能放在选择器的最后一个属性, 因为当浏览器解析 [;;] 后, 不会再读取后面属性 */
选择器 {[; 属性: 属性值;]}
如:
<p class="class"> 属性 hack 属性 hack 属性 hack 属性 hack 属性 hack 属性 hack</p>
<style type="text/css">
.class{
color:#F00\0;/* 在 IE8 和 IE9 中文本颜色为红色 */
*color:#0F0; /* 在 IE7 中文本颜色为绿色 */
_color:#00F; /* IE6 中颜色为蓝色 */
[;color:#F0F;]/* 在 Safari 和 Chrome 中颜色为品红色 */
}
</style>
/*--------------------------------- 属性 hack ]]---------------------------------*/
建议是: 尽量写出无 hack 的结构和样式, 做到可以向后兼容, 减少多余代码, 更加可以体现自己专业化的态度.
来源: http://blog.csdn.net/seanxwq/article/details/79206201