Pro CSS Techniques 读书笔记（六）

使用“标准优先”的方法

用 css 构建布局时，最好也是最省心的方法是一开始就使用对网络标准支持良好的浏览器，然后在其他浏览器中进行测试，并在需要的时候使用 hack。到目前为止，开发网站时最好用的浏览器是 Firefox，它不仅渲染引擎精准，而且额外的收获是，你可以充分利用 Chris Pederick 那非常实用的 Web Developer 以及 Firebug 扩展减少多个不眠之夜。

什么时候该用 hack

我们都愿意强调“0 hack”政策，但事实是，很多情况下你只能使用 hack；几乎任何的 css 布局都需要至少一或两个 hack 以确保它们能在 IE5+ 的版本中正常显示。虽然 hack 会让代码稍显难看，但总有一天你会需要在常规基础上使用几个 hack（除非你很幸运，只在非 IE 浏览器中工作）

IE 条件注释

大多数时候，专用的浏览器特性被认为是不好的。但条件注释却是个例外，尤其好似虽着 IE7 的普及，我们更应该感谢它。

使用条件注释的方法不多，完全列表见 MSDN 相关章节，这里说一个使用频率最高的条件注释，他的作用是区别 IE6 及以下版本：

<!--[if lte IE 6]>
   <link rel="stylesheet" type="text/css" href="css.ctba_ie_hacks.css" media="all" />
<![endif]-->

lte 的意思是小于或等于：less than or equal to

一定要让 hack 保持独立

成功的秘诀在于一定要将 hack 放在专门的样式表中。这样，在 css 出问题时就能很容易地找到并修改它们。目前 扯谈社 并没有这么做，主要原因在于 css 结构并未定型，待完善文档后再做不迟。

可能根本就不需要 hack

老外也搞标题党，不过想想，如果不用特殊标记来区分浏览器确实不叫 hack，要“完全避免 hack”的方法就是为 IE 单独写一套“错误”的样式，在头部引入样式时加上刚才提到的条件注释，并置于主 css 之后。这样，“错误”css 中同名的选择符就会按照顺序覆盖主 css 达到只让 IE 识别的目的。这不是自欺欺人么，其实还是 hack -__-

注意：条件注释开头的 if 语句也可以锁定其他 IE 版本，如 <if IE 5]>，或所有 IE 浏览器 <!--[if IE]>

一些好的 hack（和变通方法）

现在基本上已经没有所谓的“好”的 hack 了，不过仍有少数几个很实用的值得了解，尤其是在 IE6 大行其道的时候。但记住，用的 hack 越少越轻松。接下来讲几个必须知道的 hack，它能为你节省不少时间。更详细也更彻底的浏览器 hack 列表请访问 这里。

Star HTML Hack

IE7 以前的版本有个毛病，它能识别文档最外围附加且未命名的元素，这个元素以通配符（或“*”）表示，它将 html 元素当作子元素锁定，而不是文档的父元素（在 css 规范中这是不支持的，也不被其他浏览器支持），这个 bug 专门用来锁定 IE，看个例子：

Css代码

1. body {  
2.     bockground: #f7f7f7 url(img/fxck_hc.png) repeat-x  
3. }  
4. *html body {  
5.     bockground-image: none  
6. }  

body { bockground: #f7f7f7 url(img/fxck_hc.png) repeat-x } *html body { bockground-image: none }

这样的话 IE7 以下版本的 IE 将不会显示那张 png 的背景图片。
注意：该选择符的优先级比较高，hack 可以存在于源顺序的任何位置，也会覆盖任何简单选择符。

Holly Hack

IE 中的很多显示问题都源于它的渲染引擎有问题，尤其表现在一个元素是否有“布局”。Holly Hack 以那个发现它且无比聪明的女人 Holly Bergevin 命名。这个 hack 建于 Star HTML hack 之上，可以用来传递一点小的高度给 IE 中某个特定的容器，告诉 IE 的渲染引擎赋予目标元素“布局”：

Css代码

1. *html .container { height: 1% }  

*html .container { height: 1% }

简易浮动清除

浮动清除的问题由来已久，解决的方法也很多，包括在包含浮动的容器的最末元素后插入 <div style="clear:both"></div> 之类的语句，目前扯谈用的是 blogbus 的博客皮肤，这三套皮肤无一例外的用到了这个方法，其实还有更好的，比如扯谈主站在使用的 .clearfix 通用方法：

Css代码

1. /*clear both*/   
2. .clearfix:after {  
3.      content: ".";  
4.      display: block;  
5.      height: 0;  
6.      clear: both;  
7.      visibility: hidden  
8. }   
9. .clearfix {  
10.      zoom: 1;  
11.      display: inline-block;  
12.      _height: 1px  
13. }   
14. /* Hides from IE-mac */   
15. *html .clearfix {  
16.      height: 1%  
17. }   
18. *+html .clearfix {  
19.      height: 1%  
20. }   
21. .clearfix {  
22.      display: block  
23. }   
24. /* End hide from IE-mac */  

/*clear both*/ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } .clearfix { zoom: 1; display: inline-block; _height: 1px } /* Hides from IE-mac */ *html .clearfix { height: 1% } *+html .clearfix { height: 1% } .clearfix { display: block } /* End hide from IE-mac */

看看这是怎么回事。为了在包含块后生成内容，clearfix:after 使用了伪对象，这个声明创建了内容，将显示由默认的 inline 改成了 block（clear 属性不再被应用于行内元素），同时使生成的内容消失（height: 0; visibility: hidden;），所以就清除掉了所有的浮动。后半部分的作用与 Holly hack 相同。

使用的时候只需要给外围容器加上这个 clerafix 即可：

Html代码

1. <div class="container clearfix">  

<div class="container clearfix">

盒模型 hack 的无 hack 替代

盒模型 hack 成为大多数以标准为基础的开发者们的必备工具已有一段时间了，它修复了 IE5 和 IE5.5 中的闪烁渲染错误。产生这个错误的原因在于运用盒子的补丁时是从盒子的特定宽度中减去的，而不是像规范定义的那样是增加的，结果就导致了浏览器中尺寸的混 乱。下面说一种不使用 hack 的方法：

Html代码

1. <div id="container">  
2.    <div id="container-padding">  
3.       <p>mockee</p>  
4.    </div>  
5. </div>  

<div id="container"> <div id="container-padding"> <p>mockee</p> </div> </div>

Css代码

1. #container {  
2.     width: 200px;  
3.     height: 300px  
4. }  
5. #container-padding {  
6.     padding: 10px  
7. }  

#container { width: 200px; height: 300px } #container-padding { padding: 10px }

由于 #container-padding 不具有任何规定的尺寸，IE 中错误的算法就不再是问题了。

这一章的例子很多，基本都用了提到的方法，这里就不赘述了，可以自己练习下 hack 和无 hack 的布局例子，期间肯定还会遇到不少问题，不用急，下一章会详细的介绍 CSS 布局:)