一个空格引发的CSS失效BUG

相信做前端的工程师们应该都使用过伪类，因为伪类在CSS属性中始终扮演着最佳第六人的角色，并且有着举足轻重的地位。

伪类的用法其实与普通的CSS属性并没有差异，可能真正差异的应该是概念的问题。

我们都知道CSS属性的使用方法是：

选择符 {属性:属性值;}；

自然伪类的使用方法也是这样：

选择符:伪类 {属性:属性值;}。

虽然说用法是差不多的，但是针对于不同的浏览器去解析，结果也会不同。这其中往往会出问题的就是IE6了。

先来看一段代码：

	p:first-letter{font-size:300%}

这段代码对p的首字符样式的定义在IE6中是没有效果的，而在p:first-letter和{font-size:300%}之间加上空格之后，也就是原代码变成

	p:first-letter {font-size:300%}

之后，IE6的显示就正常了。但是同样的代码，在FireFox下看是正常的。按道理说，p:first-letter{font- size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE6有个BUG，在处理伪类时，如果伪类的名称中带有连字 符”-”，伪类名称后面就得跟一个空格，不然样式的定义就无效。而在FireFox中，加不加空格都可以正常处理。

其实，按照CSS标准来说，它并没有特别声明一定要在选择符与属性之间添加空格，也就是说有没有空格都是符合W3C的标准的，但是IE6对此不买账，它规定必须要在选择符与属性之间添加空格，不然它就不解析。这也再一次证明了，标准浏览器与非标准浏览器的区别。

既然这样，我们还是添加空格的好，因为我们必须要兼容IE6，这是当前中国互联网的实情。