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

なぜわからない位置：絶対; 問題を修正します。

edit position 要素は jQuery スクリプトを壊します。私はDoctypeなしで行かなければならないと思います。

4

4 に答える 4

3

は<!DOCTYPE html>上に使用する必要があります。その下に<!DOCTYPE>タグがあり<html>ます。

于 2013-09-26T19:09:01.820 に答える
0

さまざまな doctype は、ブラウザーで css がレンダリングされる方法に影響します。に固執し、<!DOCTYPE html>html と css を調整してコンテンツを配置します。たとえば、このフィドルhttp://jsfiddle.net/curlybraces/FDCtz/を参照してください。余白を -30px から 30px に変更してみてください。その変更に応じてボタンが上下に移動する様子がわかります。

于 2013-09-26T19:26:18.237 に答える
0

がなくてもページが機能する場合<!DOCTYPE html>は、追加しないでください。どうやらあなたのページはQuirks モードで動作するようになったようです (そのモードで実際に動作する範囲で)。標準モードで動作するようにページを変更することは、ページを書き直すのに匹敵する大きな労力になると予想されます。

于 2013-09-26T20:42:43.933 に答える
-1

<!DOCTYPE html>Web ブラウザのドキュメント形式宣言です。!DOCTYPE古いバージョンの HTML には、宣言する型に応じて、使用できる特定の書式設定標準がありました。

さらに、多くのデザイナーはすべての標準 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 に答える