Question

我正在制作一个布局，其中div用于顶部导航/横幅堆叠在一起。在Firefox / Chrome / Opera中布局看起来不错，但在IE中，顶部导航中每个div下面都有空格。

我尝试对每个新行使用'clear：left'，希望它会删除空格但是没有用。任何帮助将不胜感激。

Answer 1

您缺少许多重要的HTML，从有效的doctype开始。一旦你有了这个必要的标记，许多（如果不是全部）你的错误可能会消失。您可以通过以下网址访问w3c验证服务来验证您的标记：http://validator.w3.org/

使用以下内容作为模板：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Website Title Here</title>
  </head>
  <body>

    <!-- Body Content Here -->

  </body>
</html>

Answer 2

IE在标签之间有空格（例如在结束div和下一个开始标签之间）是非常奇怪的。您还有一个孤儿关闭您的philright div中的A标签。

Answer 3

如果不需要，请尝试删除这些空div。如果需要，请将line-height，font-size和padding设置为0。

Answer 4

如果没有合适的doctype，你将永远不会让IE尝试像其他更现代的浏览器一样。把它放在你的第一行，看看我们的立场：

Answer 5

缺少有效的DOCTYPE声明会导致IE以Quirks模式呈现页面。因此，无论出于何种原因，某些版本的IE可怕的three pixel bug都会全力以赴并填充你的DIV。简单的解决方案是只指定一个DOCTYPE，并希望没有人会从IE6或更糟的地方观看。否则，它将需要一些特殊的黑客攻击。例如，您可以添加一些条件CSS以将边距减少6个像素，如下所示：

<div id="wrapper">
 <div id="top"></div>
 <div id="philleft"><a href="#"><img src="philleft.jpg" alt="" /></a></div>
 <div id="philright"></a></div>
 <div id="philbelowleft"><img src="philbelowleft.jpg" alt="" /></div>
 <div id="philbelowright"></div>
 <div id="techleft" style="margin-top:-6px"><a href="#"><img src="techleft.jpg" alt="" /></a></div>
 <div id="techright" style="margin-top:-6px"></div>
 <div id="techbelowleft"><img src="techbelowleft.jpg" alt="" /></div>
 <div id="techbelowright"></div>
 <div id="testleft" style="margin-top:-6px"><a href="#"><img src="testleft.jpg" alt="" /></a></div>
 <div id="testright" style="margin-top:-6px"></div>
 <div id="testbelowleft"><img src="testbelowleft.jpg" alt="" /></div>
 <div id="testbelowright"></div>
 <div id="locationleft" style="margin-top:-6px"><a href="#"><img src="locationleft.jpg" alt="" /></a></div>
 <div id="locationright" style="margin-top:-6px"></div>
 <div id="locationbelowleft"><img src="locationbelowleft.jpg" alt="" /></div>
 <div id="locationbelowright"></div>
 <div id="rightbanner"></div>
 <div id="content">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
 Lorem ipsum dolor sit amet, consectetur adipisit, incididunaliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor inlum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br /><br />
 Lorem ipsum dolor sit amesed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exerliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </div>
 <div id="bottom"></div>
</div>

请记住确保您的实施实际上是有条件的。或者，您可以将整本现代编码实践书从窗口中删除，并使用表格而不是DIV和CSS格式化页面。通过这种方式，您可以放心地确保所有内容都能正确排列，同时使任何标准依赖于阅读您的代码，希望将他或她的头撞向砖墙（您缺少doctype，html，head和body标签已经令人钦佩地完成）。如果您选择沿着这条路线前进，我建议您将所有HTML代码大写。

如果我是你，我只需指定一个doctype并将以下代码添加到您的所有页面中：

<script>if (document.all && Number(navigator.userAgent.split("MSIE ")[1].split(";")[0])<7) alert("You are using an outdated version of Internet Explorer. Please update to version 7.0 or newer for the page to display properly.")</script>

运气好的话，每一页上的弹出窗口都会让他们更新或放弃完全访问您的网站。

IE - Div之间的意外垂直空间

5 个答案: