1

ここで少し気が狂います。

これがjsfiddleです： http://jsfiddle.net/mersenneprimes/CvGKK/

「ビジネス」は右上隅にあることに注意してください。

ここに、html ドキュメントにあるのと同じコードを示します。

これは私が得るものです： http://screencast.com/t/plAli1D3gpx

「ビジネス」は右上隅にないことに注意してください。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>

    <STYLE TYPE="text/css">

        div {
            position:relative;
            width:400px;
            height:100px;
            border:3px solid orange;

        }

        p {
            position:absolute;
            top:0;
            right:0;
            background-color:green;
        }

    </STYLE>
</head>
<body>
    <div>
        <p>business</p> 
    </div>
</body>
</html>

しかし、私が変更した場合

に、それから私はそれを正しく理解しています。

右上に正しく配置されています。

4

1 に答える 1

2

JSFiddle の CSS 正規化には、次のものが含まれます。

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0;
    padding:0;
}

あなたのCSSはそうではありません。追加

margin: 0;
padding: 0;

「div」および「p」CSS に追加すると、JSFiddle と同じ動作が得られるはずです。

于 2012-04-05T02:21:28.217 に答える