<!DOCTYPE html> 打破布局答案

【问题标题】：<!DOCTYPE html> breaks out the layout<!DOCTYPE html> 打破布局
【发布时间】：2015-07-28 10:06:56
【问题描述】：

我有以下简单模板的简单 html 代码：

<!DOCTYPE html>
<html>   

    <head>
        <title>My new website</title>
        <meta name="description" content="Simple website styled using flex box layout">
        <meta http-equiv="refresh" content="60">
        <link rel="stylesheet" type="text/css" href="style1.css">
    </head>

    <body>
        <div class="mainContainer">
            <nav class="mainMenu">
                <ol>
                    <li>
                        <a href="#">Home</a>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Contact Us</a>
                    </li>
                </ol>
            </nav>
            <div class="mainArea">
                <aside class="leftBar">
                    <h3>Navigation side bar</h3>
                    <p>Still need to think better what I will implement here.</p>
                </aside>
                <article class="mainContent">
                    <h1>Welcome!</h1>
                    <p>Nice to meet you...</p>
                </article>
                <aside class="rightBar">
                    <h3>News</h3>
                    <p>No news for now.</p>
                </aside>
            </div>
            <footer class="mainFooter">
                <p>Copyright &copy;
                    <a href="mailto:someone@coldmail.com"> someone</a>
                </p>
            </footer>
        </div>
    </body>

</html>

但是在我在 html 代码的开头添加<!DOCTYPE html> 之后布局就坏了。现在看起来像这样：

但它应该是这样的：

不仅边距损坏，例如导航栏也不完全是它应该的样子。我四处寻找解决方案，并且有一些相关的问题，但我根本无法理解为什么会出现这个问题。

这里有 CSS 代码：

html, body{        
    height: 100%;  
    width:auto; 
    font: 14px Arial;
    color:white;
    background: #444;
}

/* links */
a{
    text-decoration: none;
    color: #00aefb;
}

a:visited{
    color:#008efb;
}

a:hover{
    color: #999;
}

/* flex elements */

.mainContainer, .mainFooter, .mainArea, .mainMenu, .mainMenu ol{
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
}


/* Main container */
.mainContainer{
    font-family: Georgia;      
    flex-direction: column;     
    -webkit-flex-direction: column;     
    -moz-flex-direction: column;
}

/* mainMenu and footer */
.mainMenu, .mainFooter{
    background: #555;
    border: 1px solid white;
    border-radius: 2px;
    padding: 10px;
}

/* Just footer */
.mainFooter {
    text-align: center;
    font: 15px Arial;
    min-height: 60px;

    justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;

    align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
}

/* Main area of contents */
.mainArea{
    color: white;
    border: 1px solid white;
    border-radius: 2px;
    margin: 20 0 20 0;
    min-height:800px;                    
}

/* Main area of the main area */
.mainContent{
    background: #eee;
    color: black;
    padding:20px;

    flex: 2 2 50%;  
    -webkit-flex: 2 2 50%;
    -moz-flex: 2 2 50%;
}

/* Left and right side bars */
.leftBar, .rightBar{
    padding: 10px;

    flex: 1 1 15%;
    -webkit-flex: 1 1 15%;
    -moz-flex: 1 1 15%;    
}

/* mainMenu bar at the top */
.mainMenu {
    font: 16px Arial;

    justify-content: center;                
    -webkit-justify-content: center;
    -moz-justify-content: center;

    padding: 0;    
}

.mainMenu ol {
    list-style: none;
    padding: 0; /* Removes annoying indentation */
    margin: 0;
    text-align: center;
}

.mainMenu ol li{
    display: inline;
    padding: 20px;
    margin: 0 30 0 30;
}

li:hover, li.active{
    background: #222;
    color: #999;
    border-radius: 5px;
}


@media all and(max-width: 640px){
    .mainArea{
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;        
    }

    .mainMenu {
        font: 18px Arial;

        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;
    }

    .mainMenu ol {
        flex-direction: column;
        -webkit-flex-direction: column;
        -moz-flex-direction: column;

        align-items:stretch;            
        -webkit-align-items:stretch;        
        -moz-align-items:stretch;
    }

    .mainMenu ol li {
        margin: 0;
        padding: 10px;
    }

    .mainContainer .mainArea {
        border: 0;
        border-radius: 0;                   
    }

    .mainContent{
        order: -1;
        -webkit-order: -1;
        -moz-order: -1;

        margin: 0 0 20 0;
        border: 1px solid white;
        border-radius: 2px;
    }

    .leftBar {
        margin: 0 0 20 0;
        border: 1px solid white;
        border-radius: 2px;                 
    }

    .rightBar{
        border: 1px solid white;
        border-radius: 2px;                                     
    }

}

【问题讨论】：

标签： css html layout flexbox doctype

【解决方案1】：

你不见了.mainMenu { margin-bottom: 10px; }

或者，如果你想使用<!DOCTYPE html>，那么修复这个.mainArea { margin: 20px 0 20px 0; }，你没有提到任何单位。

CSS 单元
CSS 有几种不同的单位来表示长度。

许多 CSS 属性采用“长度”值，例如宽度、边距、内边距、字体大小、边框宽度等

长度是一个数字后跟一个长度单位，如10px、2em等

数字和单位之间不能出现空格。然而，如果值为0，单位可以省略。

对于某些 CSS 属性，允许使用负长度。

长度单位有两种：相对的和绝对的。

Reference

【讨论】：

如果没有DOCTYPE，为什么我必须指定单位...我不需要？我简直无法理解......谁实现了这些东西除了做得很好之外什么都做了......
好的，看来在长度后添加px 解决了问题。以后我会更加小心。谢谢！
抱歉，我在打开Chrome 或Firefox 上的网页时仍然遇到问题。 flex out 布局无法正常工作。你知道为什么吗？例如，媒体查询被忽略，并且它不会针对不同的屏幕尺寸改变样式......它适用于 Safari。
jsfiddle.net/js4Ldmca - 这在 Chrome、Mozilla 和 IE 上看起来完全一样

【解决方案2】：

我不会说添加<!DOCTYPE html> 会破坏布局。 doctype 告诉浏览器如何解释 HTML 和 CSS，如果不指定，则浏览器进入 quirk 模式，显示不同于严格模式。

通过添加<!doctype html>，您的某些 CSS 样式会不正确，并且浏览器会以最佳方式对其进行解释。例如，您遇到的问题之一是存在一些未指定单位的非零数值（例如：margin: 20 0 20 0;）。

【讨论】：