CSS规则不被解析

这是一个CSS文件的一部分：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。

来源

2013-07-02 laci37

没有看到HTML几乎不可能说。为什么'.imgContainer'的东西不能保持在底部？ –

我认为我们可能需要查看整个CSS文件，以查看是否存在导致此问题的格式错误。 – Andrew

＃标题很好。你的页面上是否有id =“header”元素？ – DwB

有趣。

你在你的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 + 2003）和“表意空间”（U + 3000），从来都不是空白的一部分。

来源

2013-07-02 17:33:22 RichardTowers

+1该死的麻烦零宽度空间：http://www.fileformat.info/info/unicode/char/200b/index.htm – technophobia

好赶上好友。很好的捕获。 +1 – War10ck

真的需要两个后挡板才能清除右大括号！哇！ – laci37

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

在Chrome
按打开你的网站带来了开发者工具
转到元素标签
单击#header元素在DOM树
看样式下拉到右边，看看你的CSS规则越来越overridde

来源

2013-07-02 16:03:24

你可以在firefox中使用firebug获得相同的信息（如果你更喜欢firefox）。 – DwB

我在Chromium中检查了这一点，并且css规则没有显示出来。这就是为什么我说规则没有被解析。 – laci37

嗯。添加'！重要的“有什么作用？如果不是，那么很可能是HTML错误，或者是样式表中其他地方的错误。 –

CSS规则不被解析

回答

相关问题