DOCTYPE html messes我的css

-4

我正在使用物化框架，並添加了<!DOCTYPE html>它無法識別我的CSS。但它的工作原理沒有<!DOCTYPE html>。我應該如何解決這個錯誤？DOCTYPE html messes我的css

更新：

<?php 
    session_start(); 
?> 
<!DOCTYPE html> 
<html> 
<head> 
    <title>Material</title> 
    <meta name="robots" content="index, follow"> 
    <meta name="googlebot" content="index, follow"> 
    <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <!--Import Google Icon Font--> 
     <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type="text/css"> 
     <!-- Compiled and minified CSS --> 
     <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css"> 
     <!--Import jQuery before materialize.js--> 
     <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
     <!-- Compiled and minified JavaScript --> 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script> 
     <script> 
      $(document).ready(function(){ 
       $(".button-collapse").sideNav(); 
      }); 
     </script> 

     <style> 
      body{background-color:#fcfcfc;} 

      .logo{ 
       height:70%; 
       margin-top:10px; 
       margin-left:10px; 
      } 
      @media only screen and (max-width: 992px){ 
       .logo{   
        margin-left:0px; 
       } 
      } 
      .button-collapse{ 
       margin-left:5px; 
      } 
     </style> 
</head> 
<body> 
      <div class="navbar-fixed"> 
       <nav class="blue lighten-1"> 
        <div class="nav-wrapper"> 
         <a href="index.php" class="brand-logo"><img src="images/logo.png" class="logo" /></a> 
         <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a> 
         <ul class="right hide-on-med-and-down"> 
         <li><a href="index.php" class="waves-effect waves-light">Home</a></li>       
         <li><a href="#" class="waves-effect waves-light">Login</a></li> 
         <li><a href="#" class="waves-effect waves-light">Signup</a></li> 
         <li><a href="#" class="waves-effect waves-light">Contact Us</a></li> 
         </ul> 
         <ul class="side-nav" id="mobile-demo"> 
         <li><a href="index.php" class="waves-effect waves-light">Home</a></li> 
         <li><a href="#" class="waves-effect waves-light">Login</a></li> 
         <li><a href="#" class="waves-effect waves-light">Signup</a></li> 
         <li><a href="#" class="waves-effect waves-light">Contact Us</a></li> 
         </ul> 
        </div> 
        </nav> 
      </div> 

    <div class="row header-img"> 

    </div> 

</body> 
</html>

來源

2016-10-21 013himanshu

它是否打破所有的CSS或只爲一些標籤？ – Nurjan

哪裏可以放你的CSS？在外部還是內部？ – Fiido93

你能顯示CSS嗎？ – simnys

的原因是瀏覽器切換到更正確的渲染引擎模式時，他們看到的文件中DOCTYPE。

如果添加doctype導致問題，那麼您的代碼可能有問題，並且如果沒有其他問題，它可能會出錯（或試錯）。不過，有一點可能是，罪魁禍首可能是以更符合標準的渲染模式引入的錯誤。這樣的錯誤確實存在。

如果沒有文檔類型，您的頁面將以怪癖模式呈現。這意味着瀏覽器會根據舊版瀏覽器設置的規則處理你的html和你的css。有效的html必須有文檔類型。如果你有一個正確和相當新的文檔類型，那麼你的文檔將呈現在標準兼容模式。另外，您的樣式表必須具有文本/ CSS的媒體類型。

我覺得在這裏分享你的CSS可能有助於確定到底發生了什麼問題。

來源

2016-10-21 07:23:45

請參閱更新。我已經添加了代碼。 – 013himanshu

DOCTYPE html messes我的css

回答

相關問題