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 回答