简单的 HTML 标准问题，DOCTYPE 弄乱了 CSS [关闭]答案

【问题标题】：Simple HTML standards question, DOCTYPE messes the CSS [closed]简单的 HTML 标准问题，DOCTYPE 弄乱了 CSS [关闭]
【发布时间】：2011-05-08 06:56:32
【问题描述】：

一个非常基本的问题：

当我在 .html 文档的开头包含 DOCTYPE 时：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

它只会弄乱页面的一小部分样式。

这里你可以看到一个活生生的例子：

Without DOCTYPE (Right) - With DOCTYPE (Wrong)

我想我有点“知道答案”，（除了 HTML 和 CSS 似乎是由聪明的黑猩猩编写的），问题似乎是我使用的 CSS 的一些元素不是我正在使用的 DOCTYPE 标准的一部分，因此，某些部分没有加载（用简单的英语）。

这只是我的猜测，但如果是这种情况，我想知道我不应该使用哪些元素，以及（如果足够具体的话）关于如何使用它们的“一般指南”。

提前致谢！

【问题讨论】：

标签： html css doctype

【解决方案1】：

您页面的 CSS 非常好，因为它们是有效且正确的。请记住，在没有/无效doctype 时浏览器进入的 Quirk 模式是 IE5.5 模式，在此之前您真正做的是补偿 IE5.5 引入的半破盒模型。

话虽如此，您可能需要先清理 HTML，然后再继续使用 CSS。不推荐使用 标签~~已正式弃用~~，因为它们是展示元素，因此您应该将span 包裹在标题的该位周围，并给它一个font-weight: bold。

您还应该在表单中使用labels。然后，您可以使用列表将 label - input 对组合在一起。

最后，对于标题，您可以简单地删除所有相对定位，并使用text-align: center，或者，如果您需要文本居中但右对齐，则使用固定宽度和margin: 0 auto。对您的主要内容执行相同的操作，并丢弃所有用于居中内容的相对定位和负边距。

【讨论】：

@Yi Jiang，感谢您查看datil，一定会纠正这个问题！
@Yi Jiang & @Chris，我找不到任何关于这个的参考，这是否意味着 标签也被贬值了？
@Trufa 不，克里斯是对的。与<s> 或<center> 标记不同， 标记从未被正式弃用。不使用这些标签的原因仅仅是因为 HTML 是一种标记语言，因此应该专门用于内容。  标记和其他类似标记在此上下文中没有语义意义，因此不应使用 for。另一方面， 和  标签具有含义 - 强调特定的文本块，因此应在必要时使用。
@Yi Jiang，感谢您的澄清，但我无法真正理解其中的区别， 也“强调”（用简单的英语），您能特别想到有关此主题的文档吗？谢谢！！
@Trufa 来自 HTML 4.01 规范 - 这是关于 strong 和 em 标签的部分：w3.org/TR/REC-html40/struct/text.html#h-9.2.1 - 您可以清楚地看到规范要求这些标签用于强调其中包含的文本，而  标签仅说明标签内的文本要呈现为粗体 - 没有特殊含义：w3.org/TR/REC-html40/present/graphics.html#h-15.2.1

【解决方案2】：

请注意，您使用的 doctype 会将您置于“有限怪癖模式”/“几乎标准模式”。正确的应该是

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

如果你坚持使用 XHTML（你不应该），或者

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

如果你坚持使用过时的版本（你不应该），或者

<!DOCTYPE html>

如果您需要的文档类型只是标准模式（确实如此）。

【讨论】：

【解决方案3】：

尝试在身体样式中的 700 之后添加 px（以及在 css 中指定宽度的任何位置）

这样做的原因是添加 doctype 会使浏览器进入标准模式（一件好事）。您应该通过验证器运行您的 css 以捕获您在标准模式下遇到的错误。

对不起！我们发现了以下错误（5）

第 # 行 错误

2 正文值错误：仅宽度为 0 可以是长度。你必须放一个单位在你的号码之后：700 700

18 p.titulo 属性 text-shadow 在 CSS 级别 2.1 中不存在，但存在于：2px 2px 2px #aaa 2px 2px 2px #aaa

140 #rect 值错误：仅宽度 0 可以是长度。你必须放一个单位在你的号码之后：235 235

151 #form 值错误：仅宽度 0 可以是长度。你必须放一个单位在你的号码之后：235 235

174 #navcontainer ul 值错误：边距只有 0 可以是长度。你必须在您的号码后面加上一个单位：5 5

【讨论】：

这就是答案！！很简单！非常感谢！
@Grills，我一定会的！再次感谢！
@Trufa 没问题。祝你好运！
@Grillz，很抱歉打扰您使用什么验证器？谢谢！！
W3C jigsaw.w3.org/css-validator

【解决方案4】：

浏览器使用 DOCTYPE 声明的唯一目的是在“标准模式”和“怪癖模式”（有时是“几乎标准模式”）之间切换。不同浏览器的影响略有不同。

主要区别（也是最大的区别）在于，在 IE6 中，它在 IE 的旧专有 CSS 盒子模型和影响宽度和高度计算方式的“标准”W3C 盒子模型之间切换。

http://en.wikipedia.org/wiki/Quirks_mode

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug

除非您知道自己在做什么，否则最好选择让您进入标准模式的 DOCTYPE

【讨论】：

第一次听说 Quirks Mode，感谢提供的链接，我会看看添加一些必要的知识，（希望能找到合适的 DOCTYPE）:)