我需要有人向我解释这些额外的填充来自于包含 img 元素的 div。
您可以访问http://www.dev12.com/CSSTest以获取我的两个问题的实时示例。
问题 #1:Safari、Firefox 和 Opera 在容器 div 上呈现大约 6 像素的不需要的底部填充。如果我明确地将填充设置为 0px 并不重要。
问题 #2:如果我格式化我的代码,使每个图像在我的 html 文件中单独的行上,则额外的 6 个像素的右填充被添加到每个图像。例如,以下代码块在两个图像之间呈现不需要的填充:
<div>
<span><img src="button.gif" /></span>
<span><img src="button.gif" /></span>
</div>
但是,此代码块没有不需要的空间:
<div>
<span><img src="button.gif" /></span><span><img src="button.gif" /></span>
</div>
显然 Safari、Firefox 和 Opera 将我在 span 标签之间的回车呈现为空白。我不记得以前有过这个问题。我正在 Textmate 中编写我的代码。有没有我应该查看的设置来防止这种情况发生?
我总是使用 XHTML 1.0 Strict 文档类型。这让我特别困惑,因为它是如此初级。有人帮我理解这一点!
KN