1 基本的css hack
/* Opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{head~body .sofish{display:block;}}
用媒体查询的方式确认是那种浏览器写hack
优点:全面
缺点:代码量大,不易记
2 IE的css hack
.div1{
padding:0px;
padding:0px\9 /*ALL IE */
padding:0px\0/ *IE 8,9 */
*padding:0px/*IE6,7*/
+padding:0px;/*IE7*/
_padding:0px /*IE6*/
}
优点:清晰
缺点:不全面
3IE 注释
<!--[if IE]>IE only<![endif]-->
<!--[if !IE]>NOT IE<![endif]-->
优点:安全容易维护
缺点:会增加HTTP请求
4 JS方法
原则:
1 尽量使用单独hack 比如_padding
2 不必兼容太古老的浏览器
3 在节省资源和兼容性上做权衡
写法:
注重单独的HACK。 IE的HACK比较多,选择省力易记的属性HACK;其他浏览器HACK少,选择块状的选择器HACK(推荐)
.sofish{
padding:10px;
padding:9px\9; /* all ie */
padding:8px\0; /* ie8-9 目前应用于IE8的单独hack,情况比较少 */
*padding:5px; /* ie6-7 */
+padding:7px; /* ie7 */
_padding:6px; /* ie6 */
}
/* webkit and opera */
@media all and (min-width: 0px){ .sofish{padding:11px;} }
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0){ .sofish{padding:11px;} }
/* opera */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { .sofish{padding:11px;} }
/* firefox * /
@-moz-document url-prefix(){ .sofish{padding:11px;}} /* all firefox */
html>/**/body .sofish, x:-moz-any-link, x:default { padding:11px; } /* newest firefox */