html 文档类型添加空格?

标签 html firefox rendering xhtml-1.0-strict

有人可以向我解释为什么文档类型为

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

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

在 firefox 下以不同方式呈现以下 block ?

<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' 则有!

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

最佳答案

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

这个故事的其余部分在 Images, Tables, and Mysterious Gaps 继续:

Setting images to be blocks

The first choice, and one that will work for most graphically-intense designs, is to convert the image from being an inline element to a block-level element. Do that, and it no longer generates a line box, and so the problem goes away-- assuming that the image is the only thing that occupies that table cell. In the simplest case, we might add a style like this:

td img {display: block;}

关于html 文档类型添加空格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2953763/

相关文章:

ios - 如何在 Swift 中将 Microsoft Word 文档渲染为 .png 图像

android - android 是否在提交按钮周围添加了额外的 Activity 区域?

javascript - 带有 JS 的页面中的自动上标字符,如 ©?

javascript - 为什么 innerHTML = ""在 Firefox 中很慢

javascript - FIrefox/Safari 不触发鼠标悬停事件以使用 css 类开关在另一个 div 上显示一个 div

html - 在一个 HTML 元素中有很多类是不是很糟糕?

html - 水平无序列表

html - 为什么 CSS 中的绝对单位在不同的屏幕上显示的不是真正的绝对单位?

java - 如何获取FF中插件的安装位置?

javascript - ReactJS - 某些元素仅在刷新(F5)后呈现。为什么?