Question

有人可以向我解释为什么要有

的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'就可以了！

第二个问题，使用strict，是否可以删除这个空格？

Answer 1

正如您在this table中看到的，所有浏览器中的第一个Doctype triggers怪癖模式，second将触发标准模式。

本故事的其余部分将在Images, Tables, and Mysterious Gaps继续：

Setting images to be blocks

第一个选择，一个选择   最具图形性的工作   设计，是转换图像   是一个内联元素   块级元素。那样做吧   不再生成线框，等等   问题消失了 - 假设那样   图像是唯一的   占据那个表格单元格。在里面   最简单的情况，我们可能会添加一种风格   像这样：
td img {display: block;}

Answer 2

我怀疑标记中的空白区域（例如，使表格代码清晰易读的换行符和制表符）是错误的。之前我遇到过类似的问题，标记中的空格导致屏幕上出现恼人的空间，即使它看起来并不重要（例如，在<li>标签之间）。

尝试将表格标记折叠到一个冗长的行上。

Answer 3

不确定为什么会出现空间。就修复而言，如果你不介意明确设置表格单元格的高度，你可以添加display：block;和身高：60px;你的td风格。

Answer 4

第一个DOCTYPE将在almost standards mode中呈现您的网页：

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

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

html doctype添加空格？

4 个答案: