2011-06-02 54 views
1

例如,在該html代碼中,我在外部test.css中添加list-style-type: none;。當FireFox加載該頁面時,可能會看到dots (list-style-type without none)約一秒。只有內聯CSS工作<ul id="categories" style="list-style-image: none; list-style-type: none;">列表樣式類型的問題:無;在FireFox中

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <link href="test.css" rel="stylesheet" type="text/css" /> 
    </head> 
    <body> 
     <div>TODO write content</div> 
     <ul id="categories"> 
      <li><a>Test1</a></li> 
      <li><a>Test2</a></li> 
      <li><a>Test3</a></li> 
     </ul> 
    </body> 
</html> 

ScreenShot

+2

你們看到的是[FOUC] (http://en.wikipedia.org/wiki/Flash_of_unstyled_content) - Flash Of Unstyled內容 - 如果這有助於您追蹤任何內容。 – 2011-06-02 07:55:32

+0

謝謝你那個偉大的鏈接!添加腳本標記到文檔頭解決了這個問題 – Tuco 2011-06-02 08:19:19

回答

3

我剛纔試了一下在Windows和Mac在Firefox中,並且都爲我工作得很好。顯然,這種無形內容Flash(FOUC)不會發生在每個人的瀏覽器上。

如果你堅持固定這一點,你可能會考慮使用一些解決方法,如放置在body<link>,使用@import導入你的CSS,或google it ...

+0

謝謝你的回答。解決方案#3從這裏http://www.techrepublic.com/article/prevent-the-flash-of-unstyled-content/5140996解決了這個問題。 – Tuco 2011-06-02 08:20:50

+0

這和我想說的最後40分鐘的OP是一樣的。 – 2011-06-02 08:21:38

1

使用這個CSS刪除點:

ul 
{ 
    list-style:none; 
} 

這裏是working demo

+0

否:)問題不在於此。它在jsfiddle中工作,我測試過了。但是,如果我在FireFox中加載該頁面,則不起作用。 – Tuco 2011-06-02 07:51:12

+0

FireFox顯示點大約一秒,然後變得正常。 – Tuco 2011-06-02 07:52:43

+0

我在IE,Chrome,Safari,Mozilla Firefox 3.0和4.0 Developer Preview上測試了相同的小提琴。所有結果都一樣。 – 2011-06-02 07:53:29