CSS2.1是当前普遍使用着的CSS版本，平时如果循规蹈矩的编写CSS，或许不会发现问题，可问题就是：如果想要保存的时候，不小心按Ctrl+s的时候多留了一个s在CSS文件里，问题就开始来鸟；或者是不小心在规则的大括号外边多写了一个分号……出错的事情是千奇百怪的，对于新手来说频率可能会高些。出现这样的问题的时候、调试起来你可能会感觉很莫名其妙，这就需要了解一下CSS2.1版本的容错机制了。 CSS2.1的容错方式总的来说就是：对于出现一些无效的属性、属性值、@-keywords等等，它就会忽视这些样式声明或者整个规则声明。对于无效的属性、属性名会忽视该样式声明，对于@-keywords中keywords无效时，会将整个@-keywords包含的样式声明都忽略掉。 既然CSS2.1有这个容错机制，那么还有其他一些平时比较容易忽略的错误导致的样式失效的问题，下面举例出一些实例，看完下面的实例，基本可以了解CSS解析器解析CSS代码的一些原理了。 不要在CSS每个规则之间插入除空格之外的无效字符或者插入不合CSS语法的注释，否则该无效字符之后的第一个规则无效，例如： body{color:green;}. /*这里不小心多了个点号就杯具了*/ p.ten{color:red; background-color:green;} /*这个规则是无效的*/ p.one{color:red;} /*这个有效*/ 有一种情况比较特殊，当无效字符等使用大括号“{}”包含的时候，它下面的规则正常应用了，因为浏览器CSS解析器将它当作一条规则来处理。比如： body{color:green;} {.} p.ten{color:red; background-color:green;} /*它可以work啦*/ 跟上面对应的就是在样式中出现无效字符或者插入不合CSS语法的注释，则当前无效字符之后的第一条样式无效，例如： p.one{border-style:solid; . … 了解更多
2010-6-28 updates 之前的测试都在页面中直接通过link元素外联css文件，但是动态插入的情况呢？（非常感谢Emu的提醒） 因此，又测试了使用DOM Element的方式来动态插入link元素，并外联css文件，可是问题依旧，《测试示例》。IE、Chrome、Safari照常需要等到全部的样式表都加载下来才开始呈现页面样式；FF、Opera是加载完一个样式表就渲染页面，而不需要等到全部的样式表都加载下来。 之后，测试使用一个定时器(setTimeout)的方式来异步执行动态加载css文件，《测试页面》，这下子就有点意思了：IE出现了无样式内容闪烁，仍然需要等全部的样式表都加载下来之后才呈现页面；Chrome、Safari跟FF、Opera一样了，加载完一个样式表就渲染页面，不需要等到全部的样式表都加载下来。 不过定时器的方式虽然解决了Chrome、Safari的问题，但是使得IE可能会出现无样式内容闪烁，所以也并不是很完美的方案，就看网站的用户群偏向哪些浏览器多一些了，并对这些浏览器做这方面的优化。 ——————— 完美的分界线 ———————- 一直存在一个疑问：IE同其他主流浏览器的兼容性差异都涉及到布局、HTML、Javascript、CSS规则等方面，但是对于解析样式表来渲染整个页面呢，是否也存在异同？当看到Steve Souders的博文《Frontend SPOF》，迷惑揭开了，文中对各种浏览器解析样式表的机制做了如下描述： Browsers are split on how they handle … 了解更多
对@font-face的作用，也是今晚在看这篇博文《@font-face and performance》的时候，才知道使用它可以自定义显示字体。我想在浏览器中加入@font-face的功能是处于一定的情况的，比如使用特殊的字体来显示页面某部分的字体，从而避免采用图片的方式来显示特定字体。出发点是很好的，但是…… 解析@font-face的机制在不同的浏览器下是不同的。 对于@font-face更多的叙述，在上面提到的那篇博文中有了详细的描述。但是对于它提出的说“IE doesn’t render anything in the page until the font file is done downloading if there … 了解更多
昨晚在浏览Delicious网站的时候，又看到了这种样式的导航样式： 之前一直很想做这样的一个导航，可是苦思都不知道良方，还一直认为这需要几个背景图片，着实复杂；还有hover效果，更是会难些，而且有兼容性问题。之后在FF和IE6下测试了下Delicious的兼容性效果，它在ie6下的样式，使用了普通的背景样式，没有上面所看到的折角效果。 之后看了下它的背景图片，一下子豁然开朗了，关键在于使用负margin来实现即可。下面是我实现的样式截图： 而且在兼容性和代码方面都有所改善。在IE6下也可以实现折角的效果，但是没有hover效果。而在Delicious里是在超链接a标签下嵌套了span标签，在a:hover伪类下来处理span的背景变换。而我直接在li标签中使用:hover来处理鼠标hover的背景切换，代码更加简洁了点，并且通过hack来解决ie6下兼容性问题（Updates：因为把:hover写在了li标签上，所以可以直接去掉hack来兼容ie6的css样式，也能做到稳步退化的效果）。 具体的CSS样式和背景图片可以浏览《折角导航栏效果》页面，使用firebug等工具查看页面源码。
对于在css中声明元素的背景(background-image)的时候，或许下面三个问题大家没有多大关注到的，不如下面的一条规则： [html] .bgimage { background-image: url("/images/button1.gif"); } [/html] 想象一下，当页面中没有元素使用了这个class的时候，背景图片是否会被下载？ 当页面中有元素使用了它，但是该元素又设置了display:none和visibility:hidden的时候，图片是否会被下载？ 当规则出现覆盖的时候，比如在接下来一个外联的css文件中重新定义了bgimage类，并且使用了不同的背景图片的时候，前面那张背景图片是否会被下载？比如： [html] .bgimage { background-image: url("/images/button2.gif"); } [/html] 对于上面的三个问题，Steve Souders已经在他的博文《5e … 了解更多
在surfing过程中，在淘宝UED的《Reset CSS研究（八卦篇）》中得知了如何查阅给予gecko内核的浏览器的HTML默认样式的清单的方式（只需要在gecko内核的浏览器中的地址栏中输入：resource://gre/res/html.css即可），下面提供了我在Firefox3.6.4版本中获得的HTML.css清单。将它代码高亮，有助于阅读，同时由于篇幅问题，对于webkit内核的浏览器、IE6的HTML默认样式，仅提供一个url链接：《webkit内核的HTML.css(Chrome,Safari)》，《gecko内核的HTML.css(Firefox)》，《ie6的默认样式》，《HTML4默认样式》，《CSS1默认样式》，《IE6、7、8默认样式对比列表》，《CSS2.1 User Agent Style Sheet Defaults》，《Mozilla quirk.css》，《Symbian default CSS》。 各种浏览器之间对HTML元素默认的样式的不统一性，正是YUI reset css、HTML5 Reset Stylesheet以及Eric Meyer’s CSS reset被提出来的必要性。 更多参考：《踏上寻找webkit内核渲染HTML的默认样式之路》，《HTML默认样式和浏览器默认样式》，《Reset CSS研究（八卦篇）》，《Really … 了解更多