<!DOCTYPE html> 打破布局

Posted

技术标签:

【中文标题】<!DOCTYPE html> 打破布局【英文标题】：<!DOCTYPE html> breaks out the layout 【发布时间】：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 代码的开头添加&lt;!DOCTYPE html&gt; 之后布局就坏了。现在看起来像这样：

但它应该是这样的：

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

这里有 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;

【问题讨论】：

【参考方案1】：

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

或者，如果你想使用&lt;!DOCTYPE html&gt;，那么修复这个.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】：

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

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

【讨论】：

以上是关于<!DOCTYPE html> 打破布局的主要内容，如果未能解决你的问题，请参考以下文章

Rails 在 <DOCTYPE 之前生成 html

为什么使用<!DOCTYPE HTML>

<，doctype html>是啥意思

QDomDocument 无法使用 <!doctype> 标签设置 HTML 文档的内容

&lt;!DOCTYPE&gt;奇葩的问题

前端知识总结--html