DOCTYPE 对 CSS 有影响吗？答案

【问题标题】：DOCTYPE having influence on CSS?DOCTYPE 对 CSS 有影响吗？
【发布时间】：2011-10-02 18:43:24
【问题描述】：

我想制作一个固定大小的容器，里面有一个图像（大小未知）。然后我想让图像适合容器并居中（水平和垂直）。我想出的是：

<!DOCTYPE html>
<html>
  <body>
    <div style="width: 500px; height: 375px; display: table-cell;
                vertical-align: middle">
      <img src="./Slideshow_files/Charles Bridge In Prague.jpg"
           style="max-width: 500px; max-height: 375px">
    </div>
  </body>
</html>

对于某些图像，它可以正常工作。然而this one（大小正好为500x375）使得外部div的高度比底部的375px高几个像素（Chrome中为5px，Opera中为4px）。为什么会这样？？

编辑：刚刚添加了演示 here（以及另一个带有 display: table-row 和 display: table 元素的演示，here）。在这两种情况下，红色背景都不应可见；在 Chrome 和 Opera 中是这样。

【问题讨论】：

看到问题标题时我想到的第一件事是：IE。一天晚上我很生气，因为 IE 没有正确显示我的网站。后来发现都是因为我错过了DOCTYPE。
好吧，我什至没有使用 IE，但我在 Chrome 和 FF 中都有这个问题。 DOCTYPE 影响 CSS 解释是否正常？（顺便说一句。我完全理解你的沮丧，我也花了一段时间才弄清楚这是由于 DOCTYPE）。
是的，这是正常的。更改文档类型将强制浏览器进入不同的渲染模式，从而调整盒子模型的解释方式。如果您正在开发一个新网站，我强烈建议您使用 HTML5 文档类型<!DOCTYPE html>。
<!DOCTYPE html> 没有帮助；编辑了问题，添加了实时示例。
很高兴我找到了这个问题。我花了好几个小时排除故障！

标签： html css doctype

【解决方案1】：

您可以通过在img 上设置display: block 或vertical-align: top（或bottom）来解决此问题。

共有三种不同的渲染模式：

怪癖模式
几乎标准模式
标准模式

不同的文档类型触发不同的渲染模式。见：http://hsivonen.iki.fi/doctype/

在标准模式下（带有触发文档类型），默认的vertical-align 是baseline。

在 Quirks 模式下（没有文档类型），默认的 vertical-align 是 bottom。

这个页面解释得很好：https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps

【讨论】：

像魅力一样工作！是否存在问题，因为内联元素后存在某种边距/间距/填充？
太棒了！非常感谢您的精彩回答。
谢谢！我排错了好几个小时！