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 validator似乎不来抓住这个问题。 The spec在无效空白的问题上似乎很清楚：

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

Answer 2

您的#header元素是否会受到其他CSS规则的影响？检查的好方法如下：

在Chrome中打开您的网站
按CTL-SHIFT-I以显示开发人员工具
转到“元素”标签
点击DOM树中的#header元素
查看右侧的样式下拉菜单，看看您的CSS规则是否被覆盖

CSS规则未解析

2 个答案: