9

有人可以向我解释为什么有一个 doctype

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

和

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">

在Firefox下以不同方式呈现以下块？

<table style="border-collapse:collapse; margin:0; padding:0;">
    <tr>
        <td style="border:1px solid red; margin:0; padding:0;"><img src="http://images.smh.com.au/2010/06/01/1533814/th_park-90x60.jpg" style="border:none; padding:0; margin:0;" /></td>
    </tr>
</table>

使用'Transitional'，图像下方没有空白，使用'Strict'有！

第二个问题，使用严格，是否有可能删除这个空格？

4

4 回答 4

14

如您在此表中所见，第一个 Doctype在所有浏览器中触发quirks 模式，第二个将触发标准模式。

这个故事的其余部分在图像、表格和神秘间隙中继续：

将图像设置为块

第一种选择，也适用于大多数图形密集型设计，是将图像从内联元素转换为块级元素。这样做，它不再生成一个行框，所以问题就消失了——假设图像是唯一占据该表格单元格的东西。在最简单的情况下，我们可能会添加这样的样式：

td img {display: block;}
于 2010-06-01T22:33:49.827 回答
1

我怀疑标记中的空白（例如，使表格代码清晰易读的换行符和制表符）有问题。我以前遇到过类似的问题，标记中的空间会导致屏幕上出现烦人的空间，即使它看起来无关紧要（例如，<li>标签之间）。

尝试将表格标记折叠成一条长线。

于 2010-06-01T22:22:17.403 回答
0

不知道为什么会出现空间。就修复而言，如果您不介意为表格单元格显式设置高度，则可以添加 display:block; 和高度：60px；到您的 td 样式。

于 2010-06-01T22:33:03.243 回答
0

第一个 DOCTYPE 将以几乎标准模式呈现您的页面：

“几乎标准”模式渲染在所有细节上都与“标准”模式匹配，除了一个。表格单元格内的图像布局的处理方式与“怪癖”模式的操作方式相同。

第二个 DOCTYPE 将以标准模式呈现您的页面。

于 2010-08-25T02:00:57.790 回答