@helosh14年前
在我们前端里，我并不提倡使用css hack，我始终坚信一点，随着浏览器的发展，各个浏览器对w3c的标准的支持会越来越完美，这项技术注定被淘汰；更重要的，绝大部分大家常见的兼容问题，不需要使用css hack来解决，不用css hack的解决方法会让大家深一步理解不同浏览器的特性和共性，摸清不同浏览器的脾气。
然后现在并非所有的问题都可以不用hack解决，所以我这里再总结下现在常用的hack，因为css的hack非常多，大部分不怎么实用，我这里只写几种简单实用，能区分目前常用几大浏览器的hack。
在介绍具体的hack之前，先简单介绍下hack的原理。
第一：绝大多数的hack是根据不同浏览器可以解析的代码标示不同的特点，针对具体的浏览器编写具体的属性控制。其他的浏览器不能解析，这时候就可以做到针对具体浏览器的具体控制。
类比下，中国人俄国人法国人德国人在一起，他们都会英语，我们可以用英语告诉所有人该干什么，然后可以用不同的地方语言告诉能听懂这个语言的人他自己应该干什么，别人听不懂的。英语就是我们普通的写法，而具体的中文，俄文等等就是我们使用的hack写法。
第二：部分hack，比如!important 这个hack。它实现hack的作用不是根据针对某一个浏览器是不是能读懂，而是根据权限。
可以类比css的选择器。普通的写法是标签名选择器，而用!important就好像是类选择器了。
第三：我们使用css hack的原因99%是为了调试兼容性。
也就是说我们要在不同浏览器中要达到显示一致的效果，但是不同浏览器在解析相同代码的时候出现显示上的差异。这时我们要根据具体浏览器的显示偏差编写针对这个浏览器的代码进行微调，也就是我们要使用hack。
第四：我个人建议，除非必要情况，不要使用css hack。
hack的作用就是区分不同的浏览器，我们就拿当前常用的浏览器为例，ie6.7.8,ff,chrome,op,safari等
实际上使用比较简单，直接看实例就好了。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>cssHack</title>
<style type="text/css">
h1 {
color:red; /* 通用写法，现在针对除了下面内核的其他浏览器 */
color:blue9; /* 通用效果 ie8 显示蓝色*/
*color:yellow; /* 通用效果 ie7 显示黄色*/
_color:green; /* 通用效果 ie6 显示绿色*/
}
@-moz-document url-prefix() {h1 {color:black;}} /*ff专属*/
@media screen and (-webkit-min-device-pixel-ratio:0) {h1 {color:#ccc;}} /*safari 专属*/
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {head~body h1 {color:orange;}} /*opera专属*/
</style>
</head>
<body>
<h1>我要不同的浏览器显示不同的颜色</h1>
</body>
</html> |
这个例子区分了所有常见浏览器，当然，后面针对opera等浏览器的hack不好记，所以如果你觉得还用的着，就把例子存起来吧。
你必须 登录 后再回复。