CSS Hack 浏览器兼容写法 用法

CSS Hack 不得不在一些项目中运用到。jquery博客也赶上了，关于二次开发的一个3D地图，其实也想好好写代码兼容，苦于上头要东西，短时间不可能实现，无法子，回归css hack 吧。

为了调试尼玛的3D地图，不得不安装了IE9，搭配着IEtest方便照顾IE全家。firefox chrome safari opera

Hack 的顺序

通常使用 Firefox 做为平台, 只要代码写得够标准, 其实要 Hack 的地方不会不少的, IE 之外的浏览器几乎都不会有问题, 因此能够暂时忽略, 顺序以下:
Firefox -> IE6 -> IE7 -> 其余

Hack 的用法

说到方法有两种, 一种是在不一样文件中处理, 另外一种则是在同一个文件中处理. 其实做用是相同的, 只是出发点不同而已.

1. 同一文件中处理.
如: id=”bg” 的控件要在 IE6 中显示蓝色, IE7 中显示绿色, Firefox 等其余浏览器中显示红色.

#bg {
background:red !important; /* Firefox 等其余浏览器 */
background:blue; /* IE6 */
}
*+html #bg {
background:green !important; /* IE7 */
}
IE6 不认 !important, 也不认 *+html. 因此 IE6 只能是 blue.
IE7 认 !important, 也认 *+html, 优先度: (*+html + !important) > !important > +html. IE7 能够是 red, blue 和 green, 但 green 的优先度最高.
Firefox 和其余浏览器都认 !important. !important 优先, Firefox 能够是 red 和 blue, 但 red 优先度高.

上述的优先符号均是 CSS3 标准容许的, 其余浏览器也还有其余的 Hack 方法, 但我迄今还没遇到过 Firefox 正常, IE 之外的其余浏览器不正常的状况, 因此无可分享. 只要代码规范, 相信这种状况的发生应该是很罕见 (JavaScript 除外).

2. 不一样文件中处理.
为何同一文件中能够处理还要写在多个文件里面针对不一样的浏览器? 这是为了欺骗 W3C 的验证工具, 其实只须要两个文件, 一个是针对全部浏览器的, 一个只为 尼玛的IE 服务. 将全部符合 W3C 的代码写到一个里面去, 而一些 IE 中必须的, 又不能经过 W3C 验证的代码 (如: cursor:hand;) 放到另外一个文件中, 再用下面的方法导入.

<!– 放置全部浏览器的样式 –>
<link rel=”stylesheet” href=”style.css” type=”text/css” />
<!– 只放置 IE 必须的, 而不能经过 W3C 的代码 –>
<!–[if IE]>
<link rel=”stylesheet” href=”style_ie.css” type=”text/css” />
<![endif]–>
浏览器的 CSS Hack 方法有不少, 好比 @import 引入, > 过滤等等方法, 但以上就是我用过的所有.

页面的兼容不该该仅限于对过去的浏览器支持 (向前兼容), 更应该对将来的浏览器服务 (向后兼容). 由于浏览器的发展很快, 三天两头的更新，瞧瞧谷歌 火狐都争相的升，真是一个汗字了得。So,咱们尽可能作到标准, 不得已才 Hack, 并尽可能使用比较简单的方法去解决.

最后让咱们一块儿抵制IE6，若是周围朋友客户有用IE6的，亲你看到的话帮忙请升级下。Let’s f u c k IE6,Thanks!

文章连接：http://www.jqueryba.com/280.html (转载时请注明本文出处及文章连接)