html 注释与 css hack

在 html 中适当地添加注释可以起到非常好的作用,比如解释代码内容,有时候也能用来做兼容处理,特别是针对 IE 浏览器的.css hack 也是常用的不同浏览器之间的兼容处理方式,用来处理一些奇怪的 bug…

html 注释

你可使用注释对您的代码进行解释,这样做有助于您在以后的时间对代码的编辑。当你编写了大量代码时尤其有用。
使用注释标签来隐藏浏览器不支持的脚本也是一个好习惯(这样就不会把脚本显示为纯文本)

html中的单行注释:

<!--这里面的XXXXXXXX是注释内容-->

html中的块注释:

<!--
这里面是注释内容
-->

CSS hack

针对不同的浏览器/不同版本写相应的CSS code的过程,叫做CSS hack!

条件注释:

这种方式是IE浏览器专有的Hack方式,微软官方推荐使用的hack方式。
1. 除IE外都可识别
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.

属性前缀法:

属性前缀法是在CSS样式属性名前加上一些只有特定浏览器才能识别的hack前缀,以达到预期的页面展现效果。标准模式下:

1. 大部分特殊字符IE浏览器支持,其他主流浏览器firefox,chrome,opera,safari不支持 (opera可识别除外)。
2. \9    :所有IE浏览器都支持
3. _和-  :仅IE6支持
4. *     :IE6、E7支持
5. \0    :IE8、IE9支持,opera部分支持
6. \9\0  :IE8部分支持、IE9支持
7. \0\9  :IE8、IE9支持

选择器前缀法:

选择器前缀法是针对一些页面表现不一致或者需要特殊对待的浏览器,在CSS选择器前加上一些只有某些特定浏览器才能识别的前缀进行hack。

-webkit-: webkit 内核浏览器
-ms-: 代表ie内核浏览器
-moz-: 火狐内核浏览器
-o-: opera内核浏览器

条件注释与CSS hacks的一些区别:

  1. hack是基于浏览器的bug,bug最终可能会被修复。
    条件注释是基于 IE 特定代码,这种识别机制会一直存在。
  2. 浏览器都能看见hack代码,新版浏览器会因为hack代码报错。
  3. hacks不能确保对哪些浏览器生效哪些不,尽量 少用 hack,用得越多,代码越混乱。
  4. 条件注释利用版本匹配使得作者可以容易地对特定版本写代码。