Problem with list-style-type: none; in FireFox_问答_开发者

Problem with list-style-type: none; in FireFox

开发者 https://www.devze.com 2023-03-10 08:18 出处：网络

For example, in that html code I add list-style-type: none; in external test.css. When FireFox loads that page, the dots (list-style-type without none) could be seen for about a second. Only inline cs

相关专题：css

For example, in that html code I add list-style-type: none; in external test.css. When FireFox loads that page, the dots (list-style-type without none) could be seen for about a second. Only inline css works <ul id="categories" style="list-style-image: none; list-style-type: none;">

<!DOCTYPE html>
<html>
   开发者_C百科 <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

I have just tried it on both Windows and Mac in Firefox, and both worked fine for me. Apparently, this Flash Of Unstyled Content (FOUC) doesn't happen on everyone's browser.

If you insist fixing this, you might think about using some workarounds, such as placing the <link> in body, using @import to import your css, or google it...

use this css to remove the dots: