CSS规则未解析

Question

这是css文件的一部分:

.imgContainer>img.wide {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.imgContainer>img.tall {
    max-height: 100%;
    max-width: 100%;
    width: auto;
}

/* header and its elements*/
#header {
    background-color: #1020B8;
    color: #FFF;
    height: 30px;
    margin: 0;
    padding: 0 20px;
}

#logo {
    color: #FFF;
    float: left;
    margin: auto 0;
    line-height: 30px;
}

该#header规则未解析,为什么？该#logo规则已解析.我在Chromium和Firefox中对此进行了测试.如果我将.imgContainer规则放在文件的末尾,一切正常.我在这里上传了整个css文件:https://gist.github.com/anonymous/5911008.

Answer 1

有趣.

你的CSS中有一个流氓角色就在#header规则之上:

    .imgContainer>img.tall{
    max-height:100%;
    max-width:100%;
    width:auto;
    }?
/*   ^ -- There! */

看见？在闭合支撑之后就在那里.

这是一个重现问题的jsfiddle(至少对我而言; IE9):

• 不工作:http://jsfiddle.net/2gTBT/
• 工作:http://jsfiddle.net/2gTBT/1/

我认为这个角色是U + 200B - 零宽度空间.

有趣的是,CSS验证器似乎没有抓住这个问题.关于无效空白的问题,规范似乎很清楚:

上面语法中的标记S代表空白区域.只有字符"空格"(U + 0020),"标签"(U + 0009),"换行"(U + 000A),"回车"(U + 000D)和"换页"(U + 000C) )可以发生在白色空间.其他类似空间的字符,例如"em-space"(U + 2003)和"表意空间"(U + 3000),绝不是白色空间的一部分.