【分享】说说标准——CSS的错误解析规则

WebAdvocate 2010-07-14 10:52:25

加精

我说我的眼里只有你 —— 景岗山

用这句歌词来形容CSS的错误解析规则，我觉得再合适不过。CSS的错误解析规则的眼里只有CSS标准，对其他的错误语法，大都采取直接忽略的态度，太**忠心了（此处省略三字）。

CSS跟我们所认识的其他语言，例如 JavaScript，一样，也有自己的语法，它适用于任何版本的CSS，描述了CSS的核心句法(syntax)、关键字、厂商扩展、可用字符集、规则集合、声明块、选择器、特性以及注释等所有CSS的构成部分。是组成CSS的根本。详细的资料，请参见：W3C CSS2.1中的 4.1 Syntax。

标准如同法律，有没有是一回事，切身相关的人执不执行有是另一回事。不同的是，法律带有强制性，标准就带有妥协性。你按照标准写，则可以正常的运作，否则，标准会根据它的错误解析规则，处理你的代码，大多数时候，是丢弃错误部分。不可能说你CSS写错了，出了大错就要毙掉，小错就要改造。如果是那样，估计没人敢碰了……

那么，CSS2.1中到底是如何处理错误的呢？
CSS语法规定了CSS的写法，但是开发人员还是可能写出不合CSS语法的代码，这时候，浏览器就需要忽略一部分不合法的样式表。
CSS2.1及所有后继版本中，对于任何以破折号、下划线开头的property:value组合和不包含标识符的@-keywords组合，都以忽略的方式处理。
比如：

div{ _height: 19px;}

上面存在下划线开头的特性值，按照规则，应该忽略这个声明。
而只有IE6，以及IE7和IE8的兼容模式下会自动修复这个声明，其他浏览器都忽略该声明。
在IE6(Q)(S)/IE7(Q)/IE8(Q)中，最终会解析成：

div{ height: 19px;}

补充一句，这就是著名的 IE CSS hack。

为了保证新的属性和值可以被正确添加，但遇到以下情况时，浏览器必须遵循以下的规则：
1. 未知的属性
浏览器必须忽略带有未知属性的声明。
如，

p{yes:'good'}

yes不是CSS中已有的属性，所以，应当忽略此声明。
在所有浏览器中，该声明都会被忽略。

2. 不合法的值
浏览器必须忽略带有不合法值的声明。
如，

p{height:20}

height的值应该是一个数字后加一个单位构成的值。只有一个数字的值是不合法的。应当忽略。
虽然标准如此，但是这个值在IE/Opera/Firefox/Chrome/Safari的兼容性模式下有效，在它们的标准模式下才会被忽略。可见，兼容性模式下对其做了自动修复。

3. 畸形的声明
当浏览器解析一个声明时，读取它的代码直到这个声明的结束，同时，检查 (), [], {}, "", 和 '' 的匹配规则，并且正确的处理编码，这时候，浏览器必须处理它所遇到的意外出现的标记。怎样处理？标准没有明确指出。因为针对不同的情况，应该采取不同的处理手段。很多兼容性问题也都是因为标准没说明白造成的！！
如，

p{height} /* 丢失了 ”:” 和后面的值，此属性应被忽略 */

({)P{width:100px}   /* 多余的  ({)，此行应被忽略*/

这两条声明都是错误的，应该被忽略。
在所有的主流浏览器中，这两个声明都被忽略了。

4. 不可用的@关键字
如：

@hello{...}

@hello不是标准中的@关键字。
所有浏览器都会忽略此声明。

5. 样式表的意外结束
浏览器必须自动闭合敞开的结构(如，块，字符串和注解等)
如

@media screen { p:before { content: 'Hello

应该解析为：

@media screen { p:before { content: 'Hello' } }

实际上，IE/Opera/Safari/Firefox/Chrome都没有自动的修正。注意，IE8才开始支持@media screen。
稍微修改一下：

@media screen { p:before { content: 'Hello'

注意，现在Hello文本后增加了一个单引号。
这时，IE8的标准模式下，以及Firefox/Chrome/Safari/Opera都可以自动的添加未闭合的 "}"；IE其他版本和模式下不能修复是因为不支持@media screen。

6. 字符串的意外结束
如，

p { color: green; font-family: 'Courier New Times color: red; color: red; }

应被解析为：

p { color: green; color: red; }

但经过测试，只有Safari和Chrome里，P 元素里的文字是红色的，其他浏览器里都是绿色的，也就是说，Safari和Chrome里，最终解释成了：

p { color: green; color: red; }

这是符合标准，正确的。
而在其他浏览器中，最终解析成了：

p { color: green;}

将意外结束后的声明全部忽略了。

喜欢深究的，请来这里W3C CSS2.1 中 4.2

...全文

5097 60 打赏收藏转发到动态举报

写回复

用AI写文章

60 条回复

切换为时间正序

请发表友善的回复…

发表回复

忧郁的年华 2013-01-31

打赏
举报

浏览器兼容确实是个大问题。。。

zhufangya 2012-05-23

打赏
举报

不错哦学习了,不过一切按照标准来做的话就不会有这么多的不必要的差异了

javeli 2011-12-27

打赏
举报

还可以，谢谢

niit_zc 2011-12-01

打赏
举报

回复内容匿名用户不能发表回复！登录| 注册

靓仔 2011-06-30

打赏
举报

学习中...

zuloi123 2010-10-08

打赏
举报

用的多了，自然会知道了，不过还不错。

jackemark 2010-09-29

打赏
举报

[Quote=引用 6 楼 ycx251 的回复:]
在家工作80元每天

→有条件上网，在家、公司、学校等均可
→在职或学生皆可；勤奋,细心,仔细,有责任感。
→会打字，会使用Word等常用文档处理软件

招聘人数: 200名

薪酬标准：80元/每天2~3小时，多劳多得，工资日付

公司网址：http://www.51soho.info/?21274-1.html

报名请留下QQ

(请注意,应聘不用……
[/Quote]

还是这个对我比较吸引我不错楼主也是不错的哦