Html 初学者CSS麻烦-边距出现在IE中，但不出现在Chrome或FireFox中

我知道这一定是我自己的错，但我不知道我做错了什么。在Chrome和FireFox中的外观与预期完全一致。在IE9中失败。我使用了W3CCSS验证器，它恢复了正常

我想要的只是一些文本（水平向左对齐，垂直向下对齐）和一个图像（添加横幅）在同一行上

<div id="header">
    <span id="logo">MyCoolLogoText!</span>
    <img id="ad1" src="banner.jpg">     
</div>

Internet Explorer会将跨度放在第一行，然后将图像放在下一行。如果我缩小其中一个的宽度，它们都会出现在顶行。我假设IE添加了某种边距或填充物；但我试着告诉它不要

任何帮助都将不胜感激

---

编辑：我已经为#页眉添加了样式信息

它可以添加

边距

或

填充

，因此请确保您有：

body {
   margin: 0;
   padding: 0;
}

然而，它可能只是你的窗口宽度。由于对象是浮动的，并且它们具有固定的宽度，因此只要缩小浏览器窗口宽度，就可以在任何浏览器上获得与IE9中相同的效果。这就是float的工作原理。要解决此问题，请执行以下操作（根据我看到的当前边距、填充和边框设置）：

您可以使用

width

而不是

minwidth

---

编辑：好的，标题上有宽度。我注意到您在

img

标记上的语法不正确。您有

，但它缺少结束斜杠

。我怀疑这是问题所在，但另一方面，浏览器可以用无效代码做一些有趣的事情。

尝试将#ad1显示为内联块并将其向右浮动。如果你想把FOAT包起来（前提是你不需要任何东西使其溢出），也可以在#标题上打一个隐藏的溢出。

标题上的样式是什么？听起来像是容器中的填充物导致了包装。另外，display:inline和float是一种矛盾（float优先）；float使其成为块元素，这是您能够更改宽度的唯一原因。是否需要自动关闭取决于doctype。在XHTML中你是对的，在普通HTML中是一个空元素，不需要斜杠。这一点很好。我太习惯于为XHTML编码了，以至于我忘记了以前的标准。

body {
   margin: 0;
   padding: 0;
}

#header {
    min-width: 975px; /* the width of your two floated elements */
}