1

これは私のHTMLドキュメント全体です

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            margin-left: 0px;
            margin-top: 0px;
            background-color: #0ff;
        }
    </style>
</head>
<body>
<div style="background-color: #090">some text</div>
</body>
</html>

google chrome では、div タグはウィンドウの上部の境界線のパディングであり、他のブラウザーでは 20 ～ 25 ピクセルです。div タグの上部のパディングはありません。クロムでこの問題が発生する理由を誰かが知っていますか?

4

1 に答える 1

2

アプリケーションをクロスブラウザーにするときは、常にスタイルのリセットを使用してください。このようにして、すべての矛盾を簡単に修正できます。次のような基本的なことを試すことができます。

* {
    margin: 0;
    padding: 0;
}

または、次のような他の「より完全な」ソリューションを使用してください。

たとえば、次のEric Meyer’s Reset Stylesように使用するように伝えます。

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

それが役に立てば幸い！

于 2012-08-05T15:17:45.427 に答える