缺少HTML Doctype造成的样式问题

很简单的一个登陆界面:

代码：

<html>
<head>
    <style type="text/css">
    form span {
    display: block;
    font-size: 1em;
    color: #787878;
    padding-bottom: 5px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}
        body{
            background-color: #86B4CC;
        }
        .main{
            margin: 7em auto 0;
            width: 30%;
            position: relative;
        }
        .user{
            text-align: right;
            margin-right: 5.2em;
        }
        .login{
            background-color: #fff;
            position: relative;
            padding: 2em 2em;
        }
        form span{
            display: block;
            color: #787878;    
            padding-bottom: 5px;
            font-weight: 600;
            font-family: 'Open Sans', sans-serif;

        }
        input[type="text"],input[type="Password"]{
            padding:9px;
            width: 90%;
            border:2px solid #609EC3;
            margin-left: 5px;
        }
        .sign{
            padding: 10px 0;
        }
        .submit{
            padding: 2px 2px;
            float: left;
            margin-right: 11px;
        }
        .forget-pass{
            float: right;
        }
        .submit input[type="submit"]{
            background: #F06B37;
            border:none;
            padding: 0.55em 1.3em 0.6em;
            cursor: pointer;
            color: #FFF;
            border-radius: 1.3em;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="user">
            <img src="user.png">
        </div>
        <div class="login">
            <div class="inset">
                <form>
                    <div>
                        <span>
                            <label>Username</label>
                        </span>
                        <span> 
                            <input type="text" class="textbox" id="active">
                        </span>
                    </div>
                    <div>
                        <span>
                            <label>Password</label>
                        </span>
                        <span>
                            <input type="password" class="textbox" id="active">
                        </span>                        
                    </div>
                    <div class="sign">
                        <div class="submit">
                            <input type="submit" value="LOGIN">
                        </div>
                        <div class="forget-pass">
                            <a href="#">Forget Password</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

如果加上<!DOCTYPE html>

什么代码都没有改，就是加上了<!DOCTYPE html>

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    form span {
    display: block;
    font-size: 1em;
    color: #787878;
    padding-bottom: 5px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
}
        body{
            background-color: #86B4CC;
        }
        .main{
            margin: 7em auto 0;
            width: 30%;
            position: relative;
        }
        .user{
            text-align: right;
            margin-right: 5.2em;
        }
        .login{
            background-color: #fff;
            position: relative;
            padding: 2em 2em;
        }
        form span{
            display: block;
            color: #787878;    
            padding-bottom: 5px;
            font-weight: 600;
            font-family: 'Open Sans', sans-serif;

        }
        input[type="text"],input[type="Password"]{
            padding:9px;
            width: 90%;
            border:2px solid #609EC3;
            margin-left: 5px;
        }
        .sign{
            padding: 10px 0;
        }
        .submit{
            padding: 2px 2px;
            float: left;
            margin-right: 11px;
        }
        .forget-pass{
            float: right;
        }
        .submit input[type="submit"]{
            background: #F06B37;
            border:none;
            padding: 0.55em 1.3em 0.6em;
            cursor: pointer;
            color: #FFF;
            border-radius: 1.3em;
        }

    </style>
</head>
<body>
    <div class="main">
        <div class="user">
            <img src="user.png">
        </div>
        <div class="login">
            <div class="inset">
                <form>
                    <div>
                        <span>
                            <label>Username</label>
                        </span>
                        <span> 
                            <input type="text" class="textbox" id="active">
                        </span>
                    </div>
                    <div>
                        <span>
                            <label>Password</label>
                        </span>
                        <span>
                            <input type="password" class="textbox" id="active">
                        </span>                        
                    </div>
                    <div class="sign">
                        <div class="submit">
                            <input type="submit" value="LOGIN">
                        </div>
                        <div class="forget-pass">
                            <a href="#">Forget Password</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

相关阅读:
HTML5 WebAudioAPI-实例(二)
HTML5 WebAudioAPI简介(一)
HTML5 <Audio/>标签Api整理（二）
HTML5 <Audio>标签API整理(一)
CSS3 box-sizing 属性
 CSS3新增Hsl、Hsla、Rgba色彩模式以及透明属性（转）
CSS3 颜色值HSL表示方式&简单实例
 C#使用Process类调用外部程序(转)
乐视手机查看运行内存方法、EUI（Eco User Interface）乐视系统查看手机运行内存方法
 HTML5媒体播放说明
原文地址：https://www.cnblogs.com/ghgyj/p/4038950.html