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

问题描述 投票:-2回答:1

我试图做的只是使用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">

为什么要修复它?

css html centering
1个回答
4
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.