拿字体来说，各个浏览器默认的字体种类、字体大小和字体行高都不一样，比如IE8的中文版在Windows XP下显示网页时默认字体是宋体，而英文版肯定不会如此。所以我们需要统一设置默认的字体样式，以便实现一致的显示效果来保证设计的一致性和提高开发效率。

以后准备使用如下默认字体样式：

body{
  font: 12px/1.5 arial;
}

字体：arial

我们页面的绝大部分内容字符都是中文，毫无疑问目前为止在网页上最常用也是最通用的显示中文的字体是宋体，但是宋体在显示英文、数字和英文符号时过于糟糕，比如©字符，所以我们一般期望通过CSS来实现用更好的字体样式来显示它们，然后用宋体来显示中文和中文符号。之所以选择arial是因为：

1. Windows和Mac都预装了这款字体，应该是使用最广泛的网页字体了。它的潜在对手tahoma和helvetica就没有这么幸运了。
2. 视觉设计的专业人士可能会认为在Windows中使用tahoma、在Mac中使用helvetica更好，比如淘宝的默认字体样式是font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
这是一个很不错的选择，但是你也会发现Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作为第一默认字体。所以从美观和可读性上来讲arial应该是完全可以接受的。
3. 一般情况下设置font-family都会在最后设置通用字体族以保证其安全性，比如Google的设置为font-family:arial,sans-serif;，但是至少在非中文版的Win7下当编码是GBK时，IE8会因sans-serif来渲染宋体，导致字体出现变形，这就是为什么淘宝需要在sans-serif前加上宋体而Google无需这样做的原因。
4. 因为中文字体的选择非常有限，所以目前所有的主流浏览器都设置使用宋体来显示中文。Baidu的首页和搜索结果页使用font-family:arial;可以从侧面说明这样做的安全性。可能有人注意到Firefox中国版默认显示的中文字体是微软雅黑，这是因为谋智网络擅自修改了用户自定义样式，不允许网页的样式覆盖浏览器设置的样式。也是由于类似的情况，我们要弹性设计网页非常重要。

使用英文字体作为第一默认字体会导致的问题之一就是中英文以及符号混排时的对齐问题、通过设置行高和hasLayout能解决绝大部分情况，但是都不会很完美，如果把字体改成“宋体”能彻底的解决问题。很明显，这个问题只出现在IE上。所以，如果你的网站很少使用英文、数字和英文符号，那么直接设置{font-family:\5b8b\4f53;}也是很合理的选择。

大小：12px

1. 12px是宋体能显示的极限，虽然微软雅黑能显示更小的字体，但目前的应用环境尚未成熟。由于宋体基本上是目前显示中文唯一的通用Web字体，所以12px成为最常用的字体大小。我们当然可以依据产品的需要来修改这个默认值。
2. 不用考虑基于字体大小（em）的设计。
3. 在Chrome3.0之后的中文版中，字体大小最小值是12px，比如你设置最小字体为10px，最后也变成12px。

行高：1.5倍

1. 这是一个经验值，不同的产品对这个值要求可能不同，但我们一般会设置最常用的为默认值。比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字体大小默认值是13px，行高是13*1.231=16.003px，默认的行高是默认字体的1.231倍。对于中文来说，常用的字体大小12px、14px、16px、18px等偶数大小，在IE6和IE7设置其行高也为偶数能解决一些特殊情况下的字体对其问题。
2. 在IE6和IE7中，行高值必须大于字体的2px才能保证字体的完整显示或当其作为链接时能有效显示下划线。
3. 设置line-height时，注意不要使用单位（包括%在内），因为子节点会继承经过运算后的line-height值，所以当使用单位后浏览器会把line-height计算成第一次定义的绝对值，而不会随着字体大小的变化而变化，而无单位的数值表示是所在容器的font-size的倍数，所以设置为无单位的数值是最佳选择。
4. 深入CSS 行高非常有利于理解line-height，值得一读。

性能和效率

1. 大部分平台都有arial，减少浏览器的查找时间。
2. 代码最少，书写方便。arial基本上是名字最短的字体了，可以节约CSS的大小。
3. 所有的字母都小写，目前Google就是这样做的，好处是既可以编写更快也能提升Gzip压缩的效率。
4. 中文最好用unicode表示，比如使用宋体是{font-family:\5b8b\4f53;}，使用微软雅黑是{font-family:\5fae\8f6f\96c5\9ed1;}，这样的好处是避免编码问题，同时能得到所有的主流浏览器的支持。
5. 使用正确的字体种类写法，避免使用引号，这样可以缩小CSS的大小。中文字体可以按上一条方式来编写。

未来

1. 通过对中英文及符号混排的测试，我发现微软雅黑其实表现相当不错，包括英文数字和英文字符以及在IE6和IE7的显示效果上，但唯一的遗憾是在XP下如果安装了微软雅黑字体的用户没有打开“使用屏幕字体的边缘平滑”选项的话，在Firefox、Safari和Opera、特别是IE6下会非常模糊难以辨认。针对这个问题目前并没有很好的解决方案，所以只有等到IE6使用比率非常小的时候才可能正式的使用它。或许需要到2014年，XP死掉的时候。
2. 虽然很早就有了@font-face，但是浏览器的支持、网速和商业问题，导致它很少被应用。最近关于字体的好消息是Firefox3.6将支持Web Open Font Forma。关于Web字体未来的相关信息可以看Web 字体的未来、关于 Web 字体：现状与未来和再谈 Web 字体的现状与未来。

最后推荐一下玉伯的《再谈 Web 默认字体》

DEMO中的style.css有4913个选择符，大小为554kb，但在IE中却在4095个选择符之后失效，所以说明IE的CSS文件不存在不能超过288kb的限制。

所以在IE中对style标签使用addRule方法和cssText属性添加样式时都可能会碰到这个限制，比如使用addRule方法添加第4096个选择符时会报“Invalid Argument”的异常。

实际上在IE8中，-ms-filter是filter的别名，两者区别是-ms-filter的属相值必须被单引号或双引号包围，而filter中则不是必须，而在IE8之前的版本中，filter的属性值必须不被单引号或双引号包围。

IE中的HTML元素要实现透明，则其必须具备layout，这样的元素有仅可读的属性hasLayout，且其值为true。具体情况如下：

1. body、img、table、tr、th、td等元素的hasLayout一直为true。
2. type为text、button、file或select的input的hasLayout一直为true。
3. 设置{position:absolute}的元素的hasLayout为true
4. 设置{float:left|right}的元素的hasLayout为true
5. 设置{display:inline-block}的元素的hasLayout为true
6. 设置{height:xx}或{width:xx}的元素必须具体以下两个条件之一，其hasLayout才能为true：
   1. IE8兼容模式和IE8以前的浏览器中，在标准(strict)模式下其display的值是block，如demo3就不行。
   2. 元素在怪癖模式（compat mode）下。
7. 设置了{zoom:xx}的元素在IE8的兼容模式或IE8之前的浏览器中其hasLayout为true，但在IE8的标准模式下则不会触发hasLayout。
8. 设置了{writing-mode:tb-rl}的元素的hasLayout为true。
9. 元素的contentEditable的属性值为true。
10. 在IE8标准模式下设置了{display:block}的元素的hasLayout一直为true，如demo8。

关于hasLayout的更多详情可以看Exploring Internet Explorer “HasLayout” Overview和On having layout

从上面就可以看出IE实现HTML元素的透明如此混乱，为了向下兼容和自己的私有属性让IE上实现元素透明有多种方式，比如CSS Opacity实例中的demo1到demo8，虽然IE团队推荐实现透明的方式是：

{
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: .5;
}

而目前简单最好用的实现方式是如CSS Opacity中demo4这样：

{
    filter:alpha(opacity=30);
    opacity:.3;
}

实际上目前最流行的JavaScript框架的设置样式方法都是应用这种方式，并且针对IE设置了{zoom:1}来让元素的hasLayout为true，但在IE8的标准模式下zoom并不能触发hasLayout，所以利用它们设置hasLayout为false的元素的透明度时在IE8的标准模式下是失败的，这个bug在YUI（我已经给YUI团队提交了这个bug，他们会在下个版本修复，最新的2.8.0中依旧存在，期待2.9.0吧）、Prototype、jQuery和Mootools的最新版本中都存在，具体请在IE8标准模式下看demo9到demo11。同样由于在IE8中设置透明度的方式多种多样，所以利用JavaScript获取HTML元素的透明度值需要考虑多种情况，YUI完美解决了这个问题，Prototype比jQuery稍微周全一点，而Mootools直接是bug，具体可以在IE下看demo1到demo8的演示。从这个角度给4个框架来个排名的话，YUI第一、Prototype第二、jQuery第三、Mootools垫底。

我简单的实现了设置和获取Opacity的函数，可以避开上面框架存在的bug，请在IE8标准模式下看demo12：

//设置CSS opacity 属性的函数，解决IE8的问题
var setOpacity = function(el,i){
  if(window.getComputedStyle){// for non-IE
    el.style.opacity = i;
  }else if(document.documentElement.currentStyle){ // for IE
    if(!el.currentStyle.hasLayout){
      el.style.zoom = 1;
    }
    if(!el.currentStyle.hasLayout){ //在IE8中zoom不生效，所以再次设置inline-block
      el.style.display = 'inline-block';
    }
    try{
      //测试是否已有filter
      //http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx
      if(el.filters){
        if(el.filters('alpha')){
	  el.filters('alpha').opacity = i * 100;
	}else{
	  el.style.filter += 'alpha(opacity='+ i * 100 +')';
	 }
       }
    }catch(e){
      el.style.filter = 'alpha(opacity='+ i * 100 +')';
    }
  }
}

//获取CSS opacity 属性值的函数
//借鉴自http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStyle
var getOpacity = function(el){
  var value;
  if(window.getComputedStyle){
    value = el.style.opacity;
    if(!value){
      value = el.ownerDocument.defaultView.getComputedStyle(el,null)['opacity'];
    }
    return value;
  }else if(document.documentElement.currentStyle){
    value = 100;
    try { // will error if no DXImageTransform
        value = el.filters['DXImageTransform.Microsoft.Alpha'].opacity;
    } catch(e) {
        try { // make sure its in the document
            value = el.filters('alpha').opacity;
        } catch(err) {
        }
    }
    return value / 100;
  }
}

不得不说，这些事都是IE整出来的……

CSS3的border-radius规范

最新草案中其主要信息如下：

1. 属性：border-top-right-radius
　　　border-bottom-right-radius
　　　border-bottom-right-radius
　　　border-bottom-right-radius
   值：<length> <length>?。它们分别是定义角形状的四分之一椭圆的两个半径。如图：
   
   1. 第一个值是水平半径。
   2. 如果第二个值省略，则它等于第一个值，这时这个角就是一个四分之一圆角。
   3. 如果任意一个值为0，则这个角是矩形，不会是圆的。
   4. 值不允许是负值。
2. 属性：border-radius。它是上面四个属性值的简写。
   值：<length>{1,4} [ / <length>{1,4} ]?
   1. 如果斜线前后的值都存在，那么斜线前的值设置水平半径，且斜线后的值设置垂直半径。如果没有斜线，则水平半径和垂直半径相等。
   2. 四个值是按照top-left、top-right、 bottom-right、 bottom-left的顺序来设置的。如果bottom-left省略，那么它等于top-right。如果bottom-right省略，那么它等于top-left。如果top-right省略，那么它等于top-left。
3. 应用范围：所有的元素，除了table的样式属性border-collapse是collapse时
4. 内边半径等于外边半径减去对应边的厚度。当这个结果是负值时，内边半径是0。所以内外边曲线的圆心并不一定是一致的。
5. border-radius也会导致该元素的背景也是圆的，即使border是none。如果background-clip是padding-box，则背景（background）会被曲线的内边裁剪。如果是border-box则被外边裁剪。border和padding定义的区域也一样会被曲线裁剪。
6. 所有的边框样式（solid、dotted、inset等）都遵照角的曲线。如果设置了border-image，则曲线以外的部分会被裁剪掉。
7. 如果角的两个相邻边有不同的宽度，那么这个角将会从宽的边平滑过度到窄的边。其中一条边甚至可以是0。
8. 两条相邻边颜色和样式转变的中心点是在一个和两边宽度成正比的角上。比如，两条边宽度相同，这个点就是一个45°的角上，如果一条边是另外一条边的两倍，那么这个点就在一个30°的角上。界定这个转变的线就是连接在内外曲线上的两个点的直线
9. 角不允许相互重叠，所以当相邻两个角半径的和大于所在矩形区域的大小时，用户代理（浏览器）比如缩小一个或多个角半径。运算法则如下：f = min(L_i/S_i)，i ∈ {top, right, bottom, left}，L_top = L_bottom = 所在矩形区域的宽，L_left = L_right = 所在矩形区域的高。如果f < 1，那么所有角半径都乘以f。

浏览器支持

实际中，目前没有任何一款浏览器支持这个属性，只有部分浏览器利用其私有属性支持部分实现：

1. Firefox对border-radius的支持：

   -moz-border-radius: <length>{1,4} | inherit
   -moz-border-radius-bottomleft : <length> | inherit
   -moz-border-radius-bottomright  : <length> | inherit
   -moz-border-radius-topleft  : <length> | inherit
   -moz-border-radius-topright : <length> | inherit
   

   1. 只对每个角设置一个半径，只支持实现四分之一圆角，并不支持椭圆形圆角。
   2. 具体每个角的命名规则也和W3C不一致，这个比较讨厌。
   3. Firefox3圆角已经相当圆滑了，Firefox2比较糟糕，好在它即将终结了。
2. Safari和Chrome对border-radius的支持：

   -webkit-border-radius: <length>{1,2} | inherit
   -webkit-border-bottom-left-radius : <length>{1,2} | inherit
   -webkit-border-bottom-right-radius : <length>{1,2} | inherit
   -webkit-border-top-left-radius  : <length>{1,2} | inherit
   -webkit-border-top-right-radius : <length>{1,2} | inherit
   

   1. 每个属性有1个或2个值，当有两个值时1个表示水平半径，一个表示垂直半径（当writing-mode改变也随之而变）。所以，Safari和Chrome中的圆角可以是椭圆角。
   2. webkit的实现方法和W3C的CSS3草案2005年版本非常一致，和当前的草案最大不同就是简写属性-webkit-border-radius的属性值也只有1个或2个值，意义和前面相同。
   3. Chrome中圆角锯齿比较严重，基本上和Firefox2是同一水平，或许是它的webkit版本较低造成的。
   4. 由于webkit出生于khtml，所以把 上面属性中的webkit换成khtml即会得到以khtml为核心的浏览器支持的属性了。
   5. 当相邻的角半径之和大于所在矩形区域的大小时，都会直接设置所有的角半径为0，即圆角失效，而不会像Firefox那样同比率缩小。
3. Opera尚不支持border-radius，虽然Opera10 alpha拥有众多的CSS3改进，但是依旧看不到对其支持的希望。
4. IE就不用说了，标准的不支持了。从MSDN的CSS Compatibility and Internet Explorer中可以看出IE8已经铁定不支持了。

实际应用

最简单的应用就是支持的用圆角，不支持的用方角。比如Wordpress2.7的后台、雅虎口碑UED的blog和今天你带伞了吗?。基础代码如下：

border-width: 1px;
border-style: solid;
-moz-border-radius: 11px;
-khtml-border-radius: 11px;
-webkit-border-radius: 11px;
border-radius: 11px;

实现请看演示实例。

利用VML可以实现从IE5-7的圆角，但是貌似IE8不支持VML了。组件DD_roundies就是综合以上解决方案的一个具体应用。说实话这样实现出来的圆角也比较粗糙了，我感觉还不如不要。

像VML一样，Canvas也能实现圆角，切除了IE外，所有的主流浏览器都支持。所以就有了两者结合实现的组件Cornerz。

如果上面的现实太痛苦，而又非要用圆角的话，要么一个像素一个像素去拼装，比如Chunky Borders；要么就老老实实用图片来实现吧，比如CSS Mojo的方式。

这里有一个上述CSS Hacks的应用的例子可以看看。

• [1] 此处的*号其实也可以是.号、>号、+号和#号。但它们都不属于CSS2.1规范合法属性名的一部分，所以不能通过验证。
• [2] 当IE7为quriks mode时和IE6为quriks mode解析相同，所以此时这个表达式在IE7中也能生效。这个hack已经应用了很久了，下划线_作为属性名的前缀是符合CSS2.1规范语法的，但不存在于其属性名列表中，所以依旧不能通过标准语法验证。对于多个IE的CSS Hacks，条件注释是一个很值得考虑的解决方案。另外对于IE8可以关注其新功能和变化，但现在考虑其CSS Hacks问题有点过早，真的有需求可以通过增加<meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ />来解决。
• [3] 如果把表达式中的and和(中间的空白去掉变成@media all and(min-width:0){选择符{属性:值;}}，那么Safari3+将无法识别，Opera9.5+则可以。
• [4] 这个表达式Opera9.0是支持的。

上面这些CSS Hacks仅仅是沧海一粟，是一些简单的通用的CSS Hacks。这个世界上还存在很多很知名很经典的CSS Hacks，更多的CSS Hacks可以看这里：

1. Browser CSS hacks
2. CSS Browser Hacks For Firefox, Opera, Safari & Internet Explorer
3. CSS Hacks for Different Versions of Firefox
4. CSS hacks
5. CSS Hack
6. Will the browser apply the rule(s)?
7. Tricking Browsers and Hiding Styles
8. 与臭虫为友——浏览器补救办法，臭虫以及解决方案（第二部分）
9. CSS Hackz Series: Targeting and Filtering Internet Explorer 7
10. Ultimate IE6 Cheatsheet: How To Fix 25+ Internet Explorer 6 Bugs—中文版
11. CSS让你的IE浏览器崩溃
12. Internet Explorer CSS Bugs—中文版
13. 【IE6的疯狂系列】IE6 BUG大全

在CSS中，有两种单位。一种是绝对长度单位，包括英寸(in)、厘米(cm)、毫米(mm)、点(pt)和派卡(pc)。另一种是相对长度单位，包括em、ex和像素(px)。ex由于在实际应用中需要获取x大小，因浏览器对此处理方式非常粗糙而被抛弃(更多内容可以参考Eric A. Meyer的《CSS权威指南》)，所以现在的网页设计中对大小距离的控制使用的单位是em和px（当然还有百分数值，但它必须是相对于另外一个值的）。

在css中，1个“em”定义为一种给定字体的font-size值。所以1em可能随元素的不同而不同，它会相对于父元素字体大小而改变。在常见浏览器下，默认字体的大小为16px。常见有两种方法来进行网页设计：

1. 设置默认字体大小为10px：

   body{font-size:62.5%;}
   #wrapper{width:97.4em;}

   这便于依次计算出其他元素的长宽值，比如某个容器#wrapper的宽度是974px，CSS中定义为97.4em。本站随网之舞就是依据这种方式来实现的。

2. 设计默认字体大小为网页中最常用字体的大小，比如最常用字体的大小是12px：

   body{font-size:75%;}
   #wrapper{width:81.1667em;}
   

   这样虽然省去了设置默认字体的大小，但是偶尔却为严格尺寸设计带来麻烦，比如你要设置那个宽为974px的容器#wrapper就会遇到此类麻烦。其实第一种方法也会遇到类似麻烦，只不过比第二种少些。

基于字体大小的设计好处很明显，当用户调整浏览器默认字体的大小时，字体和页面会随之缩放，能够满足挺这种方法的人常说的一个优点就是弱视的人可以通过放大字体来看清楚页面内容，增强了页面的可访问性。

每个屏幕都有分辨率，比如1280×1024分辨率时屏幕就有1280×1024个点，这每个点就是一个像素(px)。所以利用px来设计网页，不存在em那种相对于父元素字体大小变化而变化的问题。而实际上绝大部分的站点设计都是基于px设计的。在Windows平台下IE7之前都无法通过调整浏览器中的“字体大小”来调整文本大小，非IE浏览器可以，但实际上是一般基于px的页面，一旦仅仅调整了文本大小页面就会乱掉（在Firefox 2下观看除中国雅虎外的门户网站，调整一下字体大小就了解了）。

为了IE下不能调整以px为单位的字体大小，而非IE下可以的问题，YUI CSS Tools采用了如下代码来设置默认1em的大小，支持用户的字体大小调整：

body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;}

为此IE默认情况下，1em的大小是13.3333px，所以你会看到YUI CSS Grids里面那些诸如width:73.076em;这样的值。

所以，基于字体大小（em）的设计和基于px的设计相比而言：

1. 基于字体大小(em)的设计页面带来的缩放效果有限，最早基于字体大小设计的门户网站应该就是Yahoo和MSN了，而实际上它们也仅仅是保证了上下缩放三级而已，再多就乱掉了。
2. 现在的站点越来越多的图文混排，图像的高度和宽度本身就是像素数。除非你通过CSS来把图片的大小设置为相应的em值，就像本站的Logo这样，否则图片是不会随着文字变化而变化的。但是如果采用的是背景图片，那就基本上无计可施了。所以实际上基于字体大小来做图文混排设计的网页需要对图像的设计是有相当严格的要求的，即使如此仍无法完美解决，但复杂度却上升不少。
3. 基于字体大小的网页设计，将使长度变得的非常的不直观，导致设置一个宽度变得非常麻烦，YUI CSS Grids中说明了这点。并且由于em会相对于父元素字体大小变化而变化的问题，导致图文混排的复杂设计时非常麻烦。特别是在盛行过度设计和精确到像素的这个浮躁时代。其实连Google和百度这种非常简单的首页都或多或少的利用px来布局。

现在主流浏览器都支持了“全网页缩放”功能，Safari尚未支持这个功能（Google的新推出的Chrome和Safari的基于同一个核心，很遗憾也不支持这个功能），而是像Firefox2一样支持文本缩放，但是具有讽刺意味的是Apple页面基本上都是基于px的，所以一缩放就乱掉，我深信Safari支持这个功能仅仅是时间问题（Safari和Chrome共同核心引擎Webkit已经有计划了）Chrome2和Safari4都已经支持这个功能。两年前有篇《95%的中国网站需要重写CSS》很流行，虽然保证用户的可访问性是应该的，但是应该找到其最佳实现的方法，毫无疑问浏览器的“全页面缩放”功能是最佳选择。从现在开始，基于px的设计不用再过于背负违背可用性的恶名了，基于em（文字大小）的设计不能给我们带来太多的好处，反而有可能耗费太多的精力挣扎于如何精确保护视觉设计上，设计师的精力应该更多的放在内容的理解、快速呈现、语义化、对屏幕阅读器的支持等等方面上。

全球范围内IE6已经不到40%了，中国用户比率应该高些，但趋势是一样的，毕竟IE8都出Beta了，IE6会很快成为历史的。如果你是偏执狂，需要考虑Firefox2和Safari的话，或许设置body{font-size:10px;}再基于em进行设计是一个不错的办法，中国雅虎的首页就是利用类似原理。总之，是时候不用考虑基于字体大小（em）的设计了，特别是针对IE6的解决方案。

1. 使用link标记

   <link rel="stylesheet" type="text/css" href="sheet.css" />

2. 使用style元素

   <style type="text/css">
   body{background:#fff;}
   h1{font-size:2em;}
   </style>

3. 使用@import指令

   <style type="text/css">
   @import url(sheet1.css);
   @import "sheet2.css";
   </style>

4. 使用style属性的内联样式(inline style)

   <p style="color:#f00;">这是红色的字</p>

在实际应用中，使用style属性的内联样式是不推荐使用的，XHTML1.1已经将其标准为不建议使用，原因很简单这种方式不比font标记强多少，削弱了CSS集中控制整个文档外观的优点。前3种方式利用了link标记和style标记，在IE(包括IE6、IE7和IE8 beta1)中有如下限制：

1. 文档中只有前31个link或style标记关联的CSS能够应用。

   从第32个开始，其标记关联的CSS都将失效。IE的官方文档All style tags after the first 30 style tags on an HTML page are not applied in Internet Explorer也提及这个限制，包括在使用.xsl的.xml文件也有这个限制。但是似乎写错了数量。请在IE看：

   例1：34个style标记同时应用

   例2：1个style标记和34个link标记同时应用

2. 一个style标记只有前31次@import指令有效应用。

   从第32个@import指令开始忽略。请看：

   例3：在一个style标记中使用34次@import指令。

3. 一个css文件只有前31次@import指令有效应用。

   从第31个@import指令开始忽略。请看：

   例4：用link标记引入一个使用34次@import指令的css文件

   例5：用style标记引入一个使用34次@import指令的css文件

   例6：用link和style标记分别引入一个使用31次@import指令以上的css文件

4. 一个CSS文件的不能超过288kb？IE中每个style标签或css文件的选择符个数不能超过4095

   这个消息来自Internet Explorer CSS File Size Limit。

5. @import指令下层叠限制不能超过4层

   在IE下通过@import指令引入css文件时，第5层会失效。这个限制来自Cascade limit via @import rule。实际上，由于浏览器对多层嵌套的支持不完善，所以即使不得已使用了@import指令引入CSS文件，也不要超过2层。

IE对CSS的限制在绝大部分情况下是不会遇到的，即使遇到最佳的解决方案也应该是手动或者通过后端程序对CSS文件和响应的标记进行合并，最小化的http请求数是优化页面呈现的第一原则。

在IE中，可以通过document.styleSheets对象（Firefox、Opera9和Safari3.1都支持）修改内联和嵌入样式的值。该对象仅在文档包含style或link元素时可用，其实用document.styleSheets.length就可以看出IE下这个值最大是31。下面是利用Javascript来合并link和style标记来解决IE下的限制：

var fnMergeStyleSheet = function(){
if(!document.styleSheets){
    return;
}
var aSheet = document.styleSheets,
    aStyle = document.getElementsByTagName('style'),
    aLink  = document.getElementsByTagName('link');
    if(aStyle.length + aLink.length < 32 || !aSheet[0].cssText){
        //document.styleSheets.cssText 只有IE支持 
        return;
    }
    var aCssText = [],aCloneLink = [];
    //把style标签中的样式存入，然后删掉该标签，但保留第一个
    //因为由getElementsByTagName方法返回值是nodeList，所以删除时循环用倒序
    for(var i=aStyle.length-1;i>-1;--i){
        var o = aStyle[i];
            aCssText.push(o.innerHTML);
            if(i>0){
                o.parentNode.removeChild(o);
            }
    }
    //在IE中只有在31之内的link标签才能通过其styleSheet.cssText获取样式
    //无法的获取复制到一个数组aCloneLink中
    for(var i=aLink.length-1;i>-1;--i){
       var o = aLink[i];
          if(o.getAttribute && o.getAttribute('rel')==='stylesheet'){
               if(o.styleSheet){
                  aCssText.push(o.styleSheet.cssText);
               }else{
                   aCloneLink.push(o.cloneNode(true));
               }
               if(i>0){
                   o.parentNode.removeChild(o);
               }
          }
    }
    var oHead = document.getElementsByTagName('head')[0];
    //通过前面的删除，前31个link或者style标记最多只剩下2个
    //通过重新增加link节点的方法激活其styleSheet属性，从而获取样式
    for(var i = aCloneLink.length-1;i>-1;--i){
        var o = aCloneLink[i];
        oHead.appendChild(o);
        aCssText.push(o.styleSheet.cssText);
        oHead.removeChild(o);
    }
   //把所有的样式都复制给第一个标签
    aSheet[0].cssText += aCssText.join('');
}

上面仅仅是一个简单的粗糙的解决方案，演示请看例1和例2，可以改进的地方还有：

1. 没有考虑media这个属性，如果有多个media应该分别合并，当然更没有考虑link标记的rel="alternate stylesheet"带来的影响。但我更建议通过@media指令把相应的样式写在同一个文件中，至少可以减少HTTP连接数。
2. 没有解决@import指令31次限制的问题，其实可以提取其href值然后进行激活处理。但是实际应用在建议用link标记来替代@import指令，因为在IE中@import指令相当与把link标记写在文档的底部，会导致在IE5/6页面加载时瞬间无样式问题，学名叫“Flash of Unstyled Content”（简称为FOUC）的bug，当然可以通过在文档头中放一个link或script元素可以避免这个bug。
3. 一般来讲页面之所有出现大量的link或者style标签很可能有很多是相同的，可以在aCssText合并前除掉相同的项，减少代码量。

如果不用DOM中已存在的样式元素直接通过cssText属性添加样式代码，而是创建一个新的样式元素来添加，一定要注意先把新建的样式元素先添加到DOM中，然后再通过cssText属性添加样式代码。反之，其添加的样式代码似乎先被IE6的样式解析器解析后才添加，这样!imporant和hack都将失效。请看例7。不建议通过添加新的样式元素的方式来添加新的样式，这样很容易达到IE的限制条件。

@namespace url(http://www.w3.org/1999/xhtml); /* set default namespace to HTML */

/* bidi */

[dir="rtl"] {
  direction: rtl;
  unicode-bidi: embed;
}
[dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}
bdo[dir] {
  unicode-bidi: bidi-override;
}

/* blocks */

html, div, map, dt, isindex, form {
  display: block;
}

body {
  display: block;
  margin: 8px;
}

p, dl, multicol {
  display: block;
  margin: 1em 0;
}

dd {
  display: block;
  -moz-margin-start: 40px;
}

blockquote {
  display: block;
  margin: 1em 40px;
}

address {
  display: block;
  font-style: italic;
}

center {
  display: block;
  text-align: -moz-center;
}

blockquote[type=cite] {
  display: block;
  margin: 1em 0px;
  /*** start:Firefox2 ***/
  padding-left: 1em;
  border-left: solid;
  /*** end:Firefox2 ***/
  /*** start:Firefox3 ***/
  -moz-padding-start: 1em;
  -moz-border-start: solid;
  /*** end:Firefox3 ***/
  border-color: blue;
  border-width: thin;
}

span[_moz_quote=true] {
  color: blue;
}

pre[_moz_quote=true] {
  color: blue;
}

h1 {
  display: block;
  font-size: 2em;
  font-weight: bold;
  margin: .67em 0;
}

h2 {
  display: block;
  font-size: 1.5em;
  font-weight: bold;
  margin: .83em 0;
}

h3 {
  display: block;
  font-size: 1.17em;
  font-weight: bold;
  margin: 1em 0;
}

h4 {
  display: block;
  font-weight: bold;
  margin: 1.33em 0;
}

h5 {
  display: block;
  font-size: 0.83em;
  font-weight: bold;
  margin: 1.67em 0;
}

h6 {
  display: block;
  font-size: 0.67em;
  font-weight: bold;
  margin: 2.33em 0;
}

listing {
  display: block;
  font-family: -moz-fixed;
  font-size: medium;
  white-space: pre;
  margin: 1em 0;
}

xmp, pre, plaintext {
  display: block;
  font-family: -moz-fixed;
  white-space: pre;
  margin: 1em 0;
}

/* tables */

table {
  display: table;
  border-spacing: 2px;
  border-collapse: separate;
  margin-top: 0;
  margin-bottom: 0;
  /* XXXldb do we want this if we're border-collapse:collapse ? */
  -moz-box-sizing: border-box;
  text-indent: 0;
}

table[align="left"] {
  float: left;
}

table[align="right"] {
  float: right;
  text-align: start;
}

table[rules]:not([rules="none"]) {
  border-collapse: collapse;
}

/* caption inherits from table not table-outer */
caption {
  display: table-caption;
  text-align: center;
  -moz-box-sizing: border-box;
}

table[align="center"] >gt; caption {
  margin-left: auto;
  margin-right: auto;
}

table[align="center"] >gt; caption[align="left"] {
  margin-right: 0;
}

table[align="center"] >gt; caption[align="right"] {
  margin-left: 0;
}

tr {
  display: table-row;
  vertical-align: inherit;
}

col {
  display: table-column;
}

colgroup {
  display: table-column-group;
}

tbody {
  display: table-row-group;
  vertical-align: middle;
}

thead {
  display: table-header-group;
  vertical-align: middle;
}

tfoot {
  display: table-footer-group;
  vertical-align: middle;
}

/* for XHTML tables without tbody */
table >gt; tr {
  vertical-align: middle;
}

td {
  display: table-cell;
  vertical-align: inherit;
  text-align: inherit;
  padding: 1px;
}

th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  padding: 1px;
}

tr >gt; form:-moz-is-html, tbody >gt; form:-moz-is-html,
thead >gt; form:-moz-is-html, tfoot >gt; form:-moz-is-html,
table >gt; form:-moz-is-html {
  /* Important: don't show these forms in HTML */
  display: none !important;
}

/* inlines */

q:before {
  content: open-quote;
}

q:after {
  content: close-quote;
}

b, strong {
  font-weight: bolder;
}

i, cite, em, var, dfn {
  font-style: italic;
}

tt, code, kbd, samp {
  font-family: -moz-fixed;
}

u, ins {
  text-decoration: underline;
}

s, strike, del {
  text-decoration: line-through;
}

blink {
  text-decoration: blink;
}

big {
  font-size: larger;
}

small {
  font-size: smaller;
}

sub {
  vertical-align: sub;
  font-size: smaller;
  line-height: normal;
}

sup {
  vertical-align: super;
  font-size: smaller;
  line-height: normal;
}

nobr {
  white-space: nowrap;
}

/* titles */
abbr[title], acronym[title] {
  border-bottom: dotted 1px;
}

/* lists */

ul, menu, dir {
  display: block;
  list-style-type: disc;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

ol {
  display: block;
  list-style-type: decimal;
  margin: 1em 0;
  -moz-padding-start: 40px;
}

li {
  display: list-item;
  /** start:Firefox2 **/
  -moz-float-edge: margin-box;
  /** end:Firefox2 **/
}

/* nested lists have no top/bottom margins */
ul ul,   ul ol,   ul dir,   ul menu,   ul dl,
ol ul,   ol ol,   ol dir,   ol menu,   ol dl,
dir ul,  dir ol,  dir dir,  dir menu,  dir dl,
menu ul, menu ol, menu dir, menu menu, menu dl,
dl ul,   dl ol,   dl dir,   dl menu,   dl dl {
  margin-top: 0;
  margin-bottom: 0;
}

/* 2 deep unordered lists use a circle */
ol ul,   ul ul,   menu ul,   dir ul,
ol menu, ul menu, menu menu, dir menu,
ol dir,  ul dir,  menu dir,  dir dir {
  list-style-type: circle;
}

/* 3 deep (or more) unordered lists use a square */
ol ol ul,     ol ul ul,     ol menu ul,     ol dir ul,
ol ol menu,   ol ul menu,   ol menu menu,   ol dir menu,
ol ol dir,    ol ul dir,    ol menu dir,    ol dir dir,
ul ol ul,     ul ul ul,     ul menu ul,     ul dir ul,
ul ol menu,   ul ul menu,   ul menu menu,   ul dir menu,
ul ol dir,    ul ul dir,    ul menu dir,    ul dir dir,
menu ol ul,   menu ul ul,   menu menu ul,   menu dir ul,
menu ol menu, menu ul menu, menu menu menu, menu dir menu,
menu ol dir,  menu ul dir,  menu menu dir,  menu dir dir,
dir ol ul,    dir ul ul,    dir menu ul,    dir dir ul,
dir ol menu,  dir ul menu,  dir menu menu,  dir dir menu,
dir ol dir,   dir ul dir,   dir menu dir,   dir dir dir {
  list-style-type: square;
}

/* leafs */

/* gt; noshade and color attributes are handled completely by
 * the nsHTMLHRElement attribute mapping code
 */
hr {
  display: block;
  height: 2px;
  /** start:Firefox2 **/
  border: 1px -moz-bg-inset;
  /** end:Firefox2 **/
  /** start:Firefox3 **/
  border: 1px inset;
  /** end:Firefox3 **/
  margin: 0.5em auto 0.5em auto;
  /** start:Firefox3 **/
  color: gray;
  /** end:Firefox3 **/
  -moz-float-edge: margin-box;
  -moz-box-sizing: border-box;
}

hr[size="1"] {
  /** start:Firefox2 **/
  border-style: -moz-bg-solid none none none;
  /** end:Firefox2 **/
  /** start:Firefox3 **/
  border-style: solid none none none;
  /** end:Firefox3 **/
}

*|*:-moz-any-link img, img[usemap], object[usemap] {
  border: 2px solid;
}

/** start:Firefox3 **/
img:-moz-broken::before, input:-moz-broken::before,
img:-moz-user-disabled::before, input:-moz-user-disabled::before,
img:-moz-loading::before, input:-moz-loading::before,
applet:-moz-empty-except-children-with-localname(param):-moz-broken::before,
applet:-moz-empty-except-children-with-localname(param):-moz-user-disabled::before {
  content: -moz-alt-content !important;
  unicode-bidi: embed;
}

object:-moz-broken >gt; *|*, applet:-moz-broken >gt; *|*
object:-moz-user-disabled >gt; *|*, applet:-moz-user-disabled >gt; *|* {
  /*
    Inherit in the object's alignment so that if we aren't aligned explicitly
    we'll end up in the right place vertically.  See bug 36997.  Note that this
    is not !important because we _might_ be aligned explicitly.
  */
  vertical-align: inherit;
}

img:-moz-suppressed, input:-moz-suppressed, object:-moz-suppressed,
embed:-moz-suppressed, applet:-moz-suppressed {
  /*
    Set visibility too in case the page changes display.  Note that we _may_
    want to just set visibility and not display, in general, if we find that
    display:none breaks too many layouts.  And if we decide we really do want
    people to be able to right-click blocked images, etc, we need to set
    neither one, and hack the painting code.... : (
   */
  display: none !important;
  visibility: hidden !important;
}
/** end:Firefox3 **/  

img[usemap], object[usemap] {
  color: blue;
}

frameset {
  display: block ! important;
  overflow: -moz-hidden-unscrollable;
  position: static ! important;
  float: none ! important;
  border: none ! important;
}

frame {
  border: none ! important;
}

iframe {
  border: 2px inset;
}

noframes {
  display: none;
}

spacer {
  position: static ! important;
  float: none ! important;
}

canvas {
  -moz-user-select: none;
}

/* focusable content: anything w/ tabindex >gt;=0 is focusable */
abbr:focus, acronym:focus, address:focus, applet:focus, b:focus,
base:focus, big:focus, blockquote:focus, br:focus, canvas:focus, caption:focus,
center:focus, cite:focus, code:focus, col:focus, colgroup:focus, dd:focus,
del:focus, dfn:focus, dir:focus, div:focus, dl:focus, dt:focus, em:focus,
fieldset:focus, font:focus, form:focus, h1:focus, h2:focus, h3:focus, h4:focus,
h5:focus, h6:focus, hr:focus, i:focus, img:focus, ins:focus,
kbd:focus, label:focus, legend:focus, li:focus, link:focus, menu:focus,
object:focus, ol:focus, p:focus, pre:focus, q:focus, s:focus, samp:focus,
small:focus, span:focus, strike:focus, strong:focus, sub:focus, sup:focus,
table:focus, tbody:focus, td:focus, tfoot:focus, th:focus, thead:focus,
tr:focus, tt:focus, u:focus, ul:focus, var:focus {
  /** start:Firefox2 **/
   outline: 1px dotted invert;
  /** end:Firefox2 **/
  /** start:Firefox3 **/
  /* Don't specify the outline-color, we should always use initial value. */
   outline: 1px dotted;
  /** end:Firefox3 **/
}

/* hidden elements */
area, base, basefont, head, meta, script, style, title,
noembed, param {
   display: none;
}

/* emulation of non-standard HTML gt; tag */
marquee {
  /** start:Firefox2 **/
  display: block;
  /** end:Firefox2 **/
  /** start:Firefox3 **/
  width: -moz-available;
  display: inline-block;
  vertical-align: text-bottom;
  text-align: start;
  /** end:Firefox3 **/
  -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-horizontal');
}

marquee[direction="up"], marquee[direction="down"] {
  -moz-binding: url('chrome://xbl-marquee/content/xbl-marquee.xml#marquee-vertical');
  height: 200px;
}

/* PRINT ONLY rules follow */
@media print {

  marquee { -moz-binding: none; }

  /* XXX this should not be necessary, we should be stopping blinking
     of any kind in print preview, not just the gt; element */
  blink {
    text-decoration: none;
  }

}

虽然CSS2.1的附录里给了HTML4默认样式的建议(Appendix D. Default style sheet for HTML 4)，这本身就不是一个很完美的解决方案，加上各个浏览器附加上一点自己私有的属性，Firefox默认样式表中清楚的说明了这点，导致了各个浏览器的默认样式表不尽相同，比如对比这份参考CSS2.1的对HTML4默认样式的建议通过实践总结出来的IE6的默认样式表(INTERNET EXPLORER 6 DEFAULT STYLE SHEET)。解决这个问题的常见方法就是通过一个通用的CSS文件来重置HTML标签的样式，使其在各个浏览器中表现的一样，比如YUI Reset CSS和Eric Meyer的CSS Tools: Reset CSS就是很好的解决方案。

扩展阅读：Really Undoing html.css – Eric Meyer

请看例一。

Markup：

<i class="arrow-1 replacement">箭头1</i>
<a href="http://dancewithnet.com" class="arrow-2 replacement">箭头2</a>
<p class="arrow-3 replacement">箭头3</p>

CSS：

/* start:arrow */
.replacement{
    display:inline-block;/* Firefox3 beta、IE8 beta、Opera、Safari支持*/
    display:-moz-inline-stack;/* Firefox的私有属性，也可以用-moz-inline-box */
    *display:inline;
    zoom:1;/* 这两行，激活IE6/7的layout，实现类似效果 */
    line-height:9999em;
    overflow:hidden;/* 上面两行，隐藏因设置容器大小而溢出的文字，对Firefox2无效 */
    font-size:0;/* 解决上面两行代码在Firefox2下无法隐藏溢出文字*/
    /*
      * 上面是综合怿飞给出清除溢出文字新方法后的方案，下面是以前的方案
      */
    text-indent:-9999px; /* 隐藏文字，Safari和Opera下无法仅用{font-size:0;}来解决 */
    overflow:hidden;/* 上面两行，隐藏因设置容器大小而溢出的文字，对Firefox2无效 */
    font-size:0;/* 解决上面两行代码在Firefox2下无法隐藏溢出文字(谢谢怿飞)*/
    *text-indent:0;
    /* 解决IE6/7下text-indent:-9999px的bug，
     <p><a style="text-indent:-9999px;" class="replacement">箭头</a>文字</p>
     相当于
     <p style="text-indent:-9999px;"><a  class="replacement">箭头</a>文字</p>
      导致整段文字的消失，而当该链接前面有文字时则没有问题，如：
      <p>文字<a  class="replacement" style="text-indent:-9999px;">箭头</a>文字</p>
    */
    line-height:0;/* 解决{text-indent:0;font-size:0;}时，IE下文字还留下一条横线的bug  */ 

    vertical-align:middle;/* 行内垂直居中，对Opera有特殊意义，其和文字混排偏移有点离谱 */

    /*default for arrow-1*/
    width:6px;
    height:12px;
    background:url(signs.png) no-repeat 0 -360px;
}
.replacement i{
    /*display:none;*/
    /*visibility:hidden;*/
    display:block;
     /* 因为Firefox2的原因，配合里面的i标签，用来实现文本的隐藏。
               如果用注释部分的任意一个，可以删掉.replacement中的text-indent:-9999px;  */
}
.arrow-1{
}
.arrow-2{
    width:8px;
    background-position:0 -500px;
}
.arrow-3{
    width:14px;
    background-position:0 -580px;
}
.only-ff2{
    padding-left:9999px;
    /* 解决单标签下Firefox2下无法隐藏文本问题，
                 但是对其他版本浏览器都造成巨大影响，不可取 */
}
/* end:arrow */

例二是例一的一个较复杂的应用。

在这个应用中可以发现-moz-inline-box和-moz-inline-stack的区别，比如把例二中-moz-inline-stack改成-moz-inline-stack。在实际应用中-moz-inline-box会存在元素间的对齐等问题，虽然Firefox还有一个私有属性-moz-box-align来帮助解决对齐问题，但依旧难以预料问题多多，而相对来说-moz-inline-stack的表现更像inline-block，这点可以在Firefox3中测试出来。但-moz-inline-stack使用时也会有一个bug，如果一个{display:-moz-inline-stack;}的元素外层元素是{display:inline;}即会使Firefox中其包含的链接不可点，这个需要用{position:relative;}来解决（谢谢乌龙茶）：

ul.pagination{
    display:inline;
}
ul.pagination li{
    display:inline-block;
    display:-moz-inline-stack;
    *display:inline;
    zoom:1;
    *margin:0 3px;
    vertical-align:middle;
    _vertical-align:bottom;
    position:relative;
    /* 解决因为ul的{display:inline;}问题导致Firefox中li里面的链接不可点的bug */
    *position:static;
    /* 解决因为IE6中因为上一行代码带来在{position:relative}容器中移位在bug */
}

更多Firefox的私有属性可以看CSS Reference:Mozilla Extensions和Mozilla CSS Extensions。

这个效果在页面设计的时候，很多地方都可以带来便利，最常见的莫过于设计导航时，既可以像inline元素那样实现居中，又可以设置像block元素那样设置单个菜单大小，还可以通过text-indent来隐藏文字显示背景图片。请看 演示实例>>>>。

1. Opera和Safari支持这个属性。
2. IE不支持这个属性IE8 beta1支持这个属性，但inline-block会触发IE的layout，从而使内联元素具有类似inline-block元素的属性。cross-browser : display:inline-block是一个很好的例子。
   对于display:block的元素，要实现类似inline-block的效果，可以先触发layout，再设置为inline，需要注意的是这两个display必须在两个CSS声明中才有效，代码如下：

   .pagination li{
       display:inline-block;
   }
   .pagination li{
       display:inline;
   }
   

   或者直接设置为inline，再利用zoom来触发layout来实现类似效果：

   .pagination li{
       display:inline;
       zoom:1;
   }
   

3. Firefox也不支持这个，这个是蛮意外的事情，Firefox3应该会支持吧，Firefox3 beta2上已经正式支持，在这之前可以利用其私有属性{display:-moz-inline-box}来实现类似效果是一个不错的选择^[2]。

• [1] W3C的对inline-block英文定义是“This value causes an element to generate a block box, which itself is flowed as a single inline box, similar to a replaced element. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an inline replaced element.”
• [2] display:inline-block深入探究display:inline-block的深入理解