Question

我有以下代码与doctype transitional但是当我将其设置为strict时，图像的位置会发生变化并向上移动。能否帮助我理解潜在的问题，以及在哪里可以找到不同文档类型之间这些类型的其他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>

Answer 1

在怪癖模式和几乎标准模式下，图像（内联内容，因此与字体字符在同一组行上排列）是zero-height positioned at their baseline。

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

Answer 2

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

Doctype和CSS

2 个答案: