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>

在谷歌浏览器中，div 标签是窗口顶部边框的填充，20-25px，在其他浏览器中，一切都很好，div 标签没有顶部填充。有人知道为什么chrome会出现这个问题吗？

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 回答