-1

我<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;
}

不知道为什么 position: absolute; 解决问题。

编辑位置元素会破坏 jQuery 脚本。我想我将不得不在没有文档类型的情况下使用。

4

4 回答 4

3

<!DOCTYPE html>应该在上面使用。下面<!DOCTYPE>是<html>标签。

于 2013-09-26T19:09:01.820 回答
0

如果您的页面没有<!DOCTYPE html>，请不要添加它。显然，您的页面现在可以在Quirks 模式下工作（在某种程度上，任何东西都可以在该模式下真正工作），那么为什么还要打扰它呢？将页面更改为在标准模式下工作应该是一项重大工作，类似于重写页面。

于 2013-09-26T20:42:43.933 回答
0

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

于 2013-09-26T19:26:18.237 回答
-1

<!DOCTYPE html>是您的 Web 浏览器的文档格式声明。旧版本的 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;
}
于 2013-09-26T19:32:27.150 回答