DOCTYPE html이 내 CSS를 엉망으로 만듭니다

-4

구체화 프레임 워크를 사용 중입니다. <!DOCTYPE html>을 추가하면 CSS가 인식되지 않습니다. 그러나 <!DOCTYPE html> 없이는 작동합니다. 이 오류를 어떻게 해결해야합니까?DOCTYPE html이 내 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은 반드시 doctype을 가져야합니다. 정확하고 새로운 Doctype이 있다면 문서는 표준 준수 모드로 렌더링됩니다. 또한 스타일 시트에는 text/css의 미디어 유형이 있어야합니다.

여기에 CSS를 공유하면 정확히 어떤 문제가 있는지 파악하는 데 도움이 될 수 있습니다.

출처

2016-10-21 07:23:45

업데이트를 참조하십시오. 코드를 추가했습니다. – 013himanshu

DOCTYPE html이 내 CSS를 엉망으로 만듭니다

답변

관련 문제