1

这是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 。

4

2 回答 2

6

有趣的。

你的 CSS 中有一个流氓角色，就在#header规则上方：

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

看见？就在右括号之后。

这是一个重现问题的jsfiddle（至少对我而言；IE9）：

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

有趣的是，CSS 验证器似乎没有发现这个问题。不过，关于无效空格的问题，规范似乎很清楚：

上面语法中的记号 S 代表空格。只有字符“空格”（U+0020）、“制表符”（U+0009）、“换行”（U+000A）、“回车”（U+000D）和“换页”（U+000C） ) 可以出现在空白处。其他类似空格的字符，例如“em-space”（U+2003）和“ideographic space”（U+3000），绝不是空白的一部分。

于 2013-07-02T17:33:22.887 回答
0

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

  1. 在 Chrome 中打开您的网站
  2. 按下CTL-SHIFT-I以调出开发者工具
  3. 转到元素选项卡
  4. 单击#headerDOM 树中的元素
  5. 查看右侧的样式下拉菜单，看看您的 CSS 规则是否被覆盖
于 2013-07-02T16:03:24.300 回答