Question

在 IE8和Quirks模式中运行时，两张图像之间有一些神秘的填充。这两张图片是我未来网站的标志。

我已将问题分离为单个html文件， http://etcbc.org/ie_problem/ie.html

假设说“东多伦多浸信会教堂”。如你所见，目前“toro”“nto”之间有一个空格。是什么原因导致IE8中的这个空间并在Quirks模式下运行？

Answer 1

非IE浏览器在该页面上更糟糕。

您的图片均为自己的<a />标记，其样式为“display: block;”。显示块通常将每个元素放在它自己的行上（取决于应用于它们的其他样式）。

要解决此问题，请从元素中删除“display：block”样式。

<a href="http://www.etcbc.org/">
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_1.png" />
</a>
<a href="http://www.etcbc.org/">
    <img style="border-bottom: 0px; border-left: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; border-top: 0px; border-right: 0px; text-decoration: none; padding-top: 0px" src="logo_2.png" />
</a>

如果您需要将图像作为块级元素，请使用浮动将它们相互对齐，然后修复因在页面上放置浮动元素而导致的任何（潜在）布局问题，使用this clever solution。

您应该考虑为您的样式使用类，而不是在可能的情况下内联它们。现在的方式，它们将成为维护的噩梦。

此外，如果你可以控制这个，put a doctype（我推荐使用XHTML 1.0 Transitional。所有很酷的孩子都在这么做！）在你的页面的HTML中，所以你不要打开Quirks模式。离开Quirks模式会引起很多麻烦，特别是如果您尝试使用“新”技术让您的网站更好地为您的用户服务。

Answer 2

使用有效的DOCTYPE并退出quirksmode：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Answer 3

快速链接一些quirksmode所做的事情：

http://www.cs.tut.fi/~jkorpela/quirks-mode.html

它说，quirksmode中图像的默认水平边距是3像素。而且，在CSS中忽略了填充，因此，可能就是这样。

IE8运行Quirks模式的CSS问题

3 个答案: