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規則不被解析

回答

相關問題