HTMLページのちらつきを削除するにはどうすればよいですか？

http://dummytest.herokuapp.com/

プレーンバニラのHTMLが最初に表示され、それが点滅し、それが適用されるCSSでレンダリングされた瞬間にモックアップを持っています。どのようにして、私のページに、スタイル付けされていないテキストを完全に迂回する最初のものとしてCSSスタイルを表示することができますか？

出典

2012-05-10 deltanovember

あなたが最初にあなたのhtmlコードをクリーンアップする必要があります：あなたは、複数のDOCTYPE、頭と体の要素を持っています。 http://html5.validator.nu/?doc=http%3A%2F%2Fdummytest.herokuapp.com%2Fを参照してください。 – fcalderan

あなたはHTML standardに準拠するためにあなたのHTMLを修正したいと思います：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Test Harness</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 
    <!--<Le>HTML5 shim, for IE6-8 support of HTML elements</Le>--><!--[if lt IE 9]> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--<Le>styles</Le>--> 
    <link href="/stylesheets/bootstrap.css" rel="stylesheet"> 
    <link href="/stylesheets/datepicker.css" rel="stylesheet"> 
    <link href="/stylesheets/style.css" rel="stylesheet"> 
    <style>body { 
     padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */ 
    } 
    </style> 
    <script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script> 
    <script src="/javascripts/slimScroll.min.js"></script>  
    <script src="/javascripts/housefix.js"></script> 
    <script src="/javascripts/bootstrap-transition.js"></script> 
    <script src="/javascripts/bootstrap-alert.js"></script> 
    <script src="/javascripts/bootstrap-datepicker.js"></script>  
    <script src="/javascripts/bootstrap-modal.js"></script> 
    <script src="/javascripts/bootstrap-dropdown.js"></script> 
    <script src="/javascripts/bootstrap-scrollspy.js"></script> 
    <script src="/javascripts/bootstrap-tab.js"></script> 
    <script src="/javascripts/bootstrap-tooltip.js"></script> 
    <script src="/javascripts/bootstrap-popover.js"></script> 
    <script src="/javascripts/bootstrap-button.js"></script> 
    <script src="/javascripts/bootstrap-collapse.js"></script> 
    <script src="/javascripts/bootstrap-carousel.js"></script> 
    <script src="/javascripts/bootstrap-typeahead.js"></script> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
</head> 
<body> 
    <p> 
     <a href="/">Home</a> | 
     <a href="/login">Log In</a> 
    </p> 
    <h2>Welcome! Please log in.</h2> 
</body> 
</html>

出典

2012-05-10 07:39:13

文書がwell formed (wiki)ではないため、この現象が発生しています。

は、一般的にWebページが行く：

<html> 
<head> 
    <!-- meta tags go here along with title, 
     script links, and css style references --> 
</head> 
<body> 
    <!-- elements for rendering go here --> 
</body> 
</html>

出典

2012-05-10 07:20:39

にも一箇所で一箇所ですべての<head></head>コードとすべてのあなたの<body></body>のコードを入れてください。現在、<head>と<body>の2つのセットがあります。上記のものを（メニューで）取り出し、下のものと併合してください（ウェルカムメッセージ付き）。

このような将来の問題を避けるには、すべてのウェブページをhttp://validator.w3.org/まで実行することが最適です。

出典

2012-05-10 07:28:11 ephemeron

HTMLページのちらつきを削除するにはどうすればよいですか？

答えて

関連する問題