Question

我有一个超级简单的html页面，其中一个图像是唯一的内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Anzeige</title>
</head>
<body>
       <img alt="Anzeige" src="images/image.gif" />
</body>
</html>

在Safari和Firefox（以及UIWebView，这是我原来的问题）中，图像不会显示在左上角，而是具有大约5个像素的小白边。当我将图像单独加载到Firefox中时它是相同的，但是使用Safari和UIWebView时，它显示的最左上角没有边框。

有什么想法吗？

Answer 1

您需要使用以下命令将浏览器默认填充和边距重置为0

http://meyerweb.com/eric/tools/css/reset/

它的工作原理是所有浏览器都实现了默认填充和边距，将其添加到CSS文件中会将所有浏览器边距和填充重置为0px。

此代码将涵盖您将拥有的所有浏览器默认程序：

/* http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)

*/

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

Answer 2

听起来你在谈论默认的页边距。添加此CSS：

html, body { margin: 0; padding: 0; border: 0 }

为什么图像不放在html页面的最左上角？

2 个答案: