Блог

Главная - Вопросы по программированию - DOCTYPE html портит мой css

DOCTYPE html портит мой css

#html #css #materialize

#HTML #css #материализуется

Вопрос:

Я использую materialize Framework и, когда я добавляю <!DOCTYPE html> , он не распознает мой CSS. Но это работает без <!DOCTYPE html> . Как мне решить эту ошибку?

Обновить :

     <?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>

Комментарии:

1. Это нарушает весь CSS или только для некоторых тегов?

2. куда поместить ваш css? во внешнем или внутреннем?

3. можете ли вы показать CSS?

4. Это потому, что ваш CSS зависит от режима quirks. Это плохо.

5. Пожалуйста, ознакомьтесь с обновлением.

Ответ №1:

Причина в том, что браузеры переключаются в более корректный режим механизма рендеринга, когда они видят doctype в файле.

Если добавление doctype вызывает проблемы, то, вероятно, в вашем коде что-то не так, и он работает случайно (или методом проб и ошибок), если ничего другого. Однако есть небольшая вероятность, что причиной может быть ошибка, введенная в более совместимом со стандартами режиме рендеринга. Такие ошибки действительно существуют.

Без doctype ваша страница будет отображаться в режиме quirks. Это означает, что браузер будет обрабатывать ваш html И ваш css в соответствии с правилами, установленными старыми браузерами. Допустимый html ДОЛЖЕН иметь doctype. Если у вас правильный и довольно новый doctype, то ваш документ будет отображаться в режиме, совместимом со стандартами. Кроме того, в ваших таблицах стилей должен быть тип мультимедиа text / css.

Я думаю, что публикация вашего CSS здесь может помочь определить, что именно идет не так.