Question

如果没有doctype声明，以下代码就可以了：

<style type="text/css">
body {
    font: 1.0em verdana, arial, sans-serif;
}

* {
    margin:0; padding:0;
}

</style>

<table cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td><img src="/images/title_equipment.gif" /></td>
            <td><img src="/images/about.gif" /></td>
            <td><img src="/images/services.gif" /></td>
            <td><img src="/images/systems.gif" /></td>
            <td><img src="/images/equipment_new.gif" /></td>
            <td><img src="/images/equipment_used.gif" /></td>
            <td><img src="/images/news.gif" /></td>
            <td><img src="/images/contact.gif" /></td>
        </tr>
        <tr>
            <td><img src="/images/balers.gif" /></td>
        </tr>
</table>

但是在添加doctype之后：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

“tr”之间有间距，即使cellspacing和cellpadding都为零。

Answer 1

一个不使用doctype的HTML页面，或者有一个doctype，但它前面有一个XML序言（我相信这个只适用于IE）会在它所谓的quirks mode中呈现。另一种渲染模式是标准模式。

现在，您的问题是由于IMG元素是内联元素，这意味着，在标准模式下，它们下面会有一点空间。这不适用于怪癖模式。

最快的解决方案是为这些IMG元素声明display:block。有more info about this issue on Mozilla Developer Center。

Answer 2

正如Ionut已经建议的那样，没有DOCTYPE，你就是在Quirks模式下运行。虽然看起来这对你来说效果更好，但实际上它会在许多其他浏览器中以不同的方式呈现。

通过引入适当的DOCTYPE，您将指示浏览器以标准模式（或在某些浏览器/ DOCTYPE组合的几乎标准模式下）进行渲染。虽然这似乎不适合您，但它实际上会在所有浏览器中呈现更加一致，因此其他人都有更大的机会看到您所看到的内容。如果您为标准模式实施修复了样式，那么对于您页面的所有访问者来说它都会很好。

Comparison of DOCTYPES

至于解决方案，我恐怕无法击败那个能够比我更好地解释问题和解决方案的MDC文章。

doctype引起的布局问题

2 个答案: