Question

我在我的网站顶部使用<html>并且margin-top: -30px工作正常，但是当我使用<!DOCTYPE html>时，它会破坏我的保证金，因此我无法使用保证金选项移动我的按钮。

下面是代码，以便您仔细查看：

<!DOCTYPE html>
    <head>
        <title>Västerås Bastuklubb</title>
        <meta charset="UTF-8">

        <style type="text/css">
    .classname {
        -moz-box-shadow:inset 0px 1px 0px 0px #bee2f9;
        -webkit-box-shadow:inset 0px 1px 0px 0px #bee2f9;
        box-shadow:inset 0px 1px 0px 0px #bee2f9;
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #63b8ee), color-stop(1, #468ccf) );
        background:-moz-linear-gradient( center top, #63b8ee 5%, #468ccf 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#63b8ee', endColorstr='#468ccf');
        background-color:#63b8ee;
        -webkit-border-top-left-radius:42px;
        -moz-border-radius-topleft:42px;
        border-top-left-radius:42px;
        -webkit-border-top-right-radius:42px;
        -moz-border-radius-topright:42px;
        border-top-right-radius:42px;
        -webkit-border-bottom-right-radius:42px;
        -moz-border-radius-bottomright:42px;
        border-bottom-right-radius:42px;
        -webkit-border-bottom-left-radius:42px;
        -moz-border-radius-bottomleft:42px;
        border-bottom-left-radius:42px;
        text-indent:0px;
        border:1px solid #3866a3;
        display:inline-block;
        color:#14396a;
        font-family:Arial;
        font-size:15px;
        font-weight:bold;
        font-style:normal;
        height:22px;
        line-height:22px;
        width:22px;
        text-decoration:none;
        text-align:center;
        text-shadow:1px 1px 0px #7cacde;
    }
    .classname:hover {
        background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #468ccf), color-stop(1, #63b8ee) );
        background:-moz-linear-gradient( center top, #468ccf 5%, #63b8ee 100% );
        filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#468ccf', endColorstr='#63b8ee');
        background-color:#468ccf;
    }.classname:active {
        position:relative;
        top:1px;
    }</style>

        <style>
        *{
            margin: 0;
            padding: 0;
        }
        body, html
        {
            width: 100%;
            font-family: Open sans;
            font-size: 14x;
        }
        body{
            background-image: url('http://subtlepatterns.com/patterns/tree_bark.png');
        }
        #header
        {
            background-image: url('http://ipad.iwalls.org/wp-content/uploads/2010/12/pouring_water_ipad_wallpaper_png-1024x1024.jpg');
            height: 100px;
            background-position: -200px;
            background-position-y: -600px;
            background-repeat: no-repeat;
            background-color: #FFF;
            border: 3px solid #CCC;
            margin: 0px auto;
            text-align: center;
            font-size: 40px;
            padding-top: 30px;
        }

        .content
        {
            padding-top: 20px;
            padding-left: 20px;
        }

        #footer
        {
            background-image: url('http://subtlepatterns.com/patterns/binding_dark.png');
            height: 52px;
            margin-top: 435px;
            opacity: 0.9;
        }

        #footer-content
        {
            float: left;
            color: #fff;
            padding-left: 20px;
            padding-top: 15px;
            font-size: 14px;
        }
        #footer-widget
        {
            float: right;
            padding-right: 30px;
            padding-top: 15px;
        }
        #footer-widget a
        {
            text-decoration: none;
            color: #fff;
        }
        #signup{
            position: absolute;
            top: 0;
            left: 0;
            width: 400px;
            height: 400px;
            background-image: url('http://subtlepatterns.com/patterns/greyzz.png');
            display: none;
            margin-left: 500px;
            margin-top: 150px;
            border: 2px solid #000;
            text-align: center;
        }
        #contact
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 400px;
            background-image: url('http://subtlepatterns.com/patterns/greyzz.png');
            display: none;
            margin-left: 500px;
            margin-top: 150px;
            border: 3px solid #000;
            text-align: center;
        }


        #about
        {
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 400px;
            background-image: url('http://subtlepatterns.com/patterns/greyzz.png');
            display: none;
            margin-left: 500px;
            margin-top: 150px;
            border: 3px solid #000;
            text-align: center;
        }

        #signup button{
            margin-left: 385px;
            margin-top: -30px;
        }
        #contact button
        {
            margin-left: 385px;
            margin-top: -30px;
        }
        #about button
        {
            margin-left: 385px;
            margin-top: -30px;
        }
        #signup-content{
            font-size: 12px;

        }
        #contact-content
        {

        }
        #about-content{
            width: 250px;
            font-size: 12px;
            font-family: Verdana;
            padding-top: 40px;
            text-align: center;
            padding-left: 30px;
        }
        </style>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
                <script>
            $(document).ready(function() {
                $('#sign').click(function(){
                    $('#signup').show({
                        'autoopen': true
                    });
                });
            });

            $(document).ready(function(){
                $('#om').click(function(){
                    $('#about').show({
                        'autoopen': true
                    });
                });
            });

            $(document).ready(function(){
                $('#kontakta').click(function(){
                    $('#contact').show({
                        'autoopen': true
                    });
                });
            });

            $(document).ready(function(){
                $('button').click(function() {
                    $('#signup').hide(200);
                    $('#contact').hide(200);
                    $('#about').hide(200);q
                });
            });
        </script>

    </head>
    <body>
        <div id="signup">
            <p>ANMÄLAN</p>
            <button type="button" class="classname">X</button>
        </div>
        <div id="contact">
            <p>KONTAKTA OSS</p>
            <button type="button" class="classname">X</button>
        </div>
        <div id="about">
            <p>OM OSS</p>
            <button type="button" class="classname">X</button>
            <div id="about-content">
            <p>Västerås basuklubb är en ideel förening som jobbar för att främja bastbadet i Västerås med omnejd. Vi är idag över 100 medlemmar som tycker att bastu är det absolut bästa som finns.</p>
            </div>
        </div>
        <div id="header">
            <p>VÄSTERÅS BASTUKLUBB</p>
        </div>
        <div class="content">
            <ul>
            <p>YOLO SWAG</p>
        </ul>
        </div>
            <div id="footer">
                <div id="footer-content"><p>VÄSTERÅS BASTUKLUBB - (C) 2013</p></div>
                <div id="footer-widget">
                    <a href="#kontakta-oss" id="kontakta">KONTAKTA OSS |</a>    
                    <a href="#om-oss" id="om">OM OSS |</a>
                    <a href="#anmalan" id="sign">ANMÄLAN</a>
                </div>
            </div>
    </body>
    </html>

显然这解决了它：

    #signup button{
    position: absolute;
    margin-left: 185px;
    margin-top: -35px;
}

不知道为什么位置：绝对;解决了这个问题。

编辑postion元素会破坏jQuery脚本。我想我必须没有doctype。

Answer 1

<!DOCTYPE html>应该在顶部使用。 <!DOCTYPE>下面是<html>标记。

Answer 2

不同的doctypes会影响css在浏览器中呈现的方式。坚持<!DOCTYPE html>，然后调整您的html和CSS以定位您的内容。例如，请看这个小提琴http://jsfiddle.net/curlybraces/FDCtz/。尝试将边距从-30px更改为仅30px，您将看到该按钮如何根据该更改上下移动。

Answer 3

如果您的网页没有<!DOCTYPE html>，则不要添加。显然，您的页面现在可以在Quirks Mode中运行（在某种程度上，在该模式下工作），为什么还要打扰它呢？将页面更改为在标准模式下工作应该是一项重大工作，与重写页面相当。

Answer 4

<!DOCTYPE html>是您的网络浏览器的文档格式声明。较早版本的HTML具有可以使用的特定格式标准，具体取决于您声明的!DOCTYPE类型。

此外，许多设计人员对所有标准HTML元素执行CSS重置：

http://meyerweb.com/eric/tools/css/reset/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

或者，简单地说：

* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

打破边缘元素

4 个答案: