文档类型和 CSS答案

【问题标题】：Doctype and CSS文档类型和 CSS
【发布时间】：2012-02-22 06:22:06
【问题描述】：

我有以下带有 doctype 过渡的代码，但是当我将其设置为严格时，图像的位置会改变并向上移动。您能否帮助我理解潜在问题以及在哪里可以找到不同文档类型之间这些类型的其他 CSS 冲突的列表。

请注意，我知道很少有 HTML 标记在严格模式下不可用，但我特别关注 CSS 冲突。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<body>
<style type="text/css">
span.check:before { content: url("http://i41.tinypic.com/2rxea7d.png"); }
</style>
<table> 
<tr>
<th>Ruby on Rails</th>
    <td><span class="check"></span></td>
    <td><span class="check"></span></td>
    <td><span class="check"></span></td>
    <td><span class="check"></span></td>
</tr>
<tr>
<th>Road on Rails</th>
    <td><span class="check"></span></td>
    <td><span class="check"></span></td>
    <td><span class="check"></span></td>
    <td><span class="check"></span></td>
</tr>
</table>
</body>
</html>

【问题讨论】：

阅读：quirksmode.org/css/quirksmode.html
在 FX 9.0.1 和最新的 Chrome 中，但不确定其他版本。
doctype 使事情区分大小写，包括您的 id 和类的名称，并可能解释为什么 doctype 会弄乱您的 css

标签： html css doctype

【解决方案1】：

我希望更改您的文档类型会将某些版本的 Internet Explorer 的运行模式从标准模式更改为兼容模式。 Internet Explorer（除其他外）更正了它如何解释边界框模型，但能够根据 DOCTYPE 在旧方法和更正方法之间切换。

【讨论】：

【解决方案2】：

在 quirks 模式和几乎标准模式下，图像（它们是内联内容，因此与字体字符布置在同一组行中）是 zero-height positioned at their baseline。

您可以在标准模式下通过旋转生成图像的vertical-align 属性或将其设置为display: block 来获得相同的效果。

【讨论】：

我放了 display: block;下面的内容正确，但它没有改变任何东西，两种文档类型之间的差异保持不变。