【转】优化CSS的网页渲染速度的11种方法
1、十六进制的颜色值对位数与大小写
编写十六进制颜色值时你可能会用小写字母或省略成3位数，关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响，但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。
* 不赞成 - color:#f3a;
* 建议用 - color:#FF33AA;
2、display与visibility的差异
他们用于设置或检索是否显示对象。display隐藏对象不保留物理空间，visibility为隐藏对象保留占据的物理空间。当浏览器渲染被占据的物理空间时，会有所消耗资源。
* 不赞成 - visibility:hidden;
* 建议用 - display:none;
3、border:none;与border:0;的区别
和display与visibility的关系类似，分别不保留与保留空间。更多的是border:0;尽管可以隐藏掉边框，但它会为你保留border-color/border-style的使用权。
* 不赞成 - border:0;
* 建议用 - border:none;
4、不宜用过小的背景图片平铺
一张宽高1px的背景图片，虽然文件体积非常之小，但渲染宽高500px的板块需要重复平铺2500次。提高背景图片渲染效率跟图片尺寸及体积有关，最大的图片文件体积保持约70KB。
* 不赞成 - 宽高8px以下的平铺背景图片
* 建议用 - 衡量适中体积及尺寸的背景图片
5、慎用IE滤镜
IE的滤镜除了比较消耗资源外也有兼容性问题。当中有让PNG透明的滤镜，可采用GIF或JPG似透非透的办法来避免使用此滤镜。建议只在IE6应用GIF透明，因为IE7以上已经支持了PNG透明。
* 不赞成，滥用IE滤镜因为消耗资源外也有兼容性问题。
* 建议用，最好选择其它方法能避免使用滤镜。
6、*{ margin:0; padding:0;}避免浏览器样式差异
*号通配符把所有标签都初始化一遍，浏览器的渲染消耗一定的资源。有部分在标签在不同浏览器上几乎无差异，或是某些已经不推荐使用的标签(因为你不会去用它)，它们不需通配符要重新初始化一遍这样做能节省一点资源。
* 不赞成，使用*号通配符
* 不赞成，div span button b table等标签纳入通配符控制内外填充样式
* 建议用，有选择性地使用通配符控制内外填充样式。
7、不要添加额外的标签来描述class或id
如果你有一个选择器是以id作为关键选择符，请不要添加多余标签名上去。因为ID是唯一的，你不要为了一个不存在的理由而降低了匹配的效率。
* 不赞成 - button#backButton { }
* 不赞成 - .menu-left #newMenuIcon { }
* 建议用 - #backButton { }
* 建议用 - #newM
相关文档：
CSS 盒模型
网页设计中的每个元素都是长方形的盒子。盒子的尺寸是怎样精确计算的，请看下图：
如果是 Firebug 用户的话(基本和前端有关的都会用到 Firebug 吧 – 糖伴西红柿)，就会很熟悉下面的图表了。
这个图表很好地展示了作用于页面上任意盒子的数值。
注意以上两个例子中，margi ......
Internet Explorer 8预设是以CSS 2.1为标准，并修正了许多Internet Explorer 7的CSS Bug，这意味着有一部份以往依据IE 7所设计的网页，
在IE 8上的呈现会有所出入，所幸拜IE 7相容检视功能所赐，目前因使用IE 8而导致版面错误的网站并不多。
但一值依赖IE 7相容检视功能并非长久之计，尽早将网站修改为IE 8相容才是长久 ......
这里只把一些我自己还需要改进的地方发上来。
————————————————————————
1.网页不是静态的、绝对的媒体。这意味着内能伸缩变形，用户应该被允许调整自己喜欢的方式， ......
很多时候我们必须使一些块元素并排显示，一般想到的是必须使用浮动，但是块元素浮动给边距(margin)的时候在IE下会出现加倍的BUG，所以很多时候不得不把这个块元素套在一个内联元素里面，然后给内联元素浮动和边距。今天看到了怿飞、秦歌和乌龙茶关于display:inline-block的文章，很不错，综合一下，记录下来。
display:inl ......
作者：IIduce 来源：css9 时间：2009-12-21 阅读：601 次 原文链接 [收藏]
最近产品中需要加入“一个列表显示样式快速切换”的功能，正好在这篇文章中看到了它的实现方式，感觉很不错。
这篇文章讲述的是如何通过CSS和JQuery来实现� ......
