1.浏览器模式和DTD
我们平常用到的浏览器可能有多个模式，比如标准模式，兼容模式。在标准模式中，浏览器根据规范显示页面。兼容模式为了兼容老版本浏览器下的代码，用了很多非标准的解析方式。
DTD全称Document Type Definition（文档类型定义）。一个DTD包含元素的定义规则、元素间关系的定义规则、元素可使用的属性、可使用的实体或符号规则。
如果漏写了DTD，IE6，IE7，IE8就会触发兼容模式。DTD详细参考
http://www.w3school.com.cn/tags/tag_doctype.asp
2.如何组织CSS代码
《编写高质量代码》一书中推荐base+common+page的层叠结构。
2.1base层
base层力求精简通用，提供CSS reset功能和力度最小的通用类——原子类。该层会被所有页面引用，与具体UI无关。
由于每个浏览器的默认样式都不统一，所以可以在这层通过CSS reset覆盖浏览器的默认样式，统一定义成自己的样式。
2.2common层
common层位于中间，提供组件级的CSS类。代码尽可能封装复用。
2.3page层
page层位于最高层，控制具体页面的精确样式，所以每个页面都可能会有一个page。建议将网站所有page层代码放在一个文件里。分块写上注释，便于维护。
3.面向对象风格的CSS
顾名思义，CSS在书写时的命名规范，结构组织可以参考面向对象编程的一些规范。比如使用驼峰命名来区分单词，.itemList，使用“-”来表示从属关系，itemList-firstList。多用组合，少用继承等。
另外，本书还推荐少用低权重原则。多用class，少用子选择器。这样样式容易被覆盖，易于维护。
4.CSS Sprite
Sprite看起来好用，其实还有一些注意点:
1.它能合并的只能是用于背景的图片，对于<img src="" />设置的图片，是不能合并到CSS Sprite中的，这样会影响可读性。
2.不适用与横向和纵向都平铺的图片。
3.CSS Sprite最大的好处是减少服务器压力。这需要付出“降低开发效率”和“增大维护难度”的代价。如果你的网站流量并不大的话，并不推荐用这种方法。
5.其他问题
5.1 CSS hack
5.1.1 IE条件注释法
<!--[if IE6]> 只在IE6下生效 <![endif]--> <!--[if gt IE6]> IE6以上都生效 <![endif]--> <!--[if ! IE6]> 只在IE6下不生效 <![endif]-->
这是微软官方推荐的hack方式，它是最安全的hack方式。
5.1.2选择符前缀法
在CSS选择符前加一些只有特定浏览器才能识别的符号，从而让某些样式只对特定浏览器生效。例如“*html”只对IE6生效。“*+html”只对IE7生效。
5.1.3样式属性前缀法
在CSS属性名前加一些只有特定浏览器才能识别的符号，从而让某些属性只对特定浏览器生效。例如“_l”只对IE6生效。“*”只对IE6,IE7生效。
.box{
width:60px;
_width:60px;
*width:60px;
}
5.2超链接样式问题
只要遵循love hate原则就没问题：l(
link )ov(
visited)e h(
hover)a(
active)te。
5.3 hasLayout
IE奇葩的根源。这个在精通css系列中有讲。触发hasLayout会解决大部分IE下的bug。通过设置“zoom:1”和“posisiton:relative”来触发是最有保障的方式。
hasLayout设计初衷是为了辅助块级元素的盒模型解析的，如果用于行内元素，会有一些特殊的效果。
5.4块级元素和行内元素
常见块级元素：div,p,form,h1,caption,dd,dt,dl,table,ul,ol......
常见行内元素：a,img,strong,span,input,i,br......
区别：
1.块级元素独占一行，默认其宽度填满父元素宽度。行内元素不会独占一行，宽度随元素内容变化，没有width，height属性；
2.块级元素可以设置margin，padding。行内元素可以设置水平方向的margin，padding，竖直方向的不会产生边距效果；
display还有inline-block属性，IE6，IE7下会有bug，修复方法百度一下。
