Question

这是我的整个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？

Answer 1

在跨浏览器制作应用程序时始终使用重置样式，这样您可以轻松修复所有不一致的地方，您可以尝试以下基本内容：

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

希望它有所帮助！

意外的填充html文档，来自chrome的窗口顶部边框

1 个答案: