Question

我试图做的只是使用CSS将div放在中心位置。我无法理解它。它根本不起作用。我使用了以下代码：

<style type="text/css">
<!--
div.test {
    width: 300px;
    margin-right: auto;
    margin-left: auto;
    border: 1px solid black;
}

-->
</style>
<div class='test'>
hello
</div>

这在IE上没有用，它在其他任何东西上都有效（包括我的iPhone，这让它非常令人沮丧）。 div只是在右边保持对齐。

现在对于（简单！）解决方案，这花费了我很多时间，而且我找不到在搜索引擎中搜索问题的方法。只需添加doctype，et voila：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

为什么要修复它？

Answer 1

是的，如果你省略了<!DOCTYPE>声明，你会得到可怕的Quirks Mode，其中IE试图像IE5一样尽可能地表现，出于兼容性原因。

不支持margin-left / right: auto是IE5 CSS中较为突出的错误之一，但绝不是唯一的，甚至是最糟糕的错误。怪癖模式CSS渲染是一个巨大的麻烦，你应该不惜一切代价避免。始终在每个HTML文档中都包含<!DOCTYPE>。

为什么添加DOCTYPE会影响CSS中DIV的居中？

1 个答案: