为 html5（或任何 doctype）添加 doctype 会破坏我的网站答案

【问题标题】：Adding doctype for html5 (or any doctype) breaks my site为 html5（或任何 doctype）添加 doctype 会破坏我的网站
【发布时间】：2014-01-28 22:34:12
【问题描述】：

向任何照片系列页面（鲑鱼、伙伴、漂白剂、水彩）添加 doctype 会破坏页面并导致 div 的固定附件背景图像不出现。

我不确定这个网站是否是这样工作的，但如果有人能帮助我找出网站的哪些部分在怪癖模式之外（在任何浏览器中）无法正常工作，我将非常感激。

这里是该站点的实时版本以及托管在 github 上的链接：

http://emilyduda.pancakeapps.com/stories.html

https://github.com/Michaelzrobin/duda-2-beta/tree/gh-pages

我知道我应该从声明我的 doctype 开始——代码有很多错误，而且我没有很好地规划网站，因为我在编写代码时就设计了它，而且我对两者都是新手.我有很多乱七八糟的样式和多余的样式表，还有很多调试和重构要做，但我想先看看我是否可以在不必完全重新编码网站的情况下处理这个文档类型问题。

【问题讨论】：

欢迎来到 SO。你能做一个小提琴吗？如果该网站发生变化，带有页面链接的帖子在未来对任何人都没有任何好处......
我不确定我是否可以制作小提琴，因为它有几个不同的样式表和脚本依赖于它？有什么建议吗？

标签： css html debugging doctype

【解决方案1】：

简答：如果<!DOCTYPE html> 破坏了您的格式，请检查您是否使用了% 单元，和/或是否将% 替换为vw 或@987654325 @ 可能会有所帮助。

只需在此处添加我的 2 美分的价值，以防它对其他人有所帮助。

我有一个网页没有 <!DOCTYPE html> 运行良好，即格式正确。有一次我添加了<!DOCTYPE html>，高度搞砸了。长话短说，我最终发现，没有<!DOCTYPE html>，包含100% 的高度计算工作正常，但是当添加<!DOCTYPE html> 时，它就坏了。我将 100% 转换为 100vh ，瞧，页面格式再次起作用了。

我还没有解决（也不会解决）发生这种情况的原因，但可能与 % 单元在怪癖模式下的行为与现代“非-怪癖”模式。例如，也许在 quirks 模式下，% 是相对于元素的父对象以外的东西，比如视口……但我只是在猜测。在任何情况下，如果<!DOCTYPE html> 破坏了您的格式，请考虑调查您对% 单元的使用，以及是否使用vw/vh 而不是% 可能更合适。

【讨论】：

【解决方案2】：

现代网页需要有一个文档类型。没有一个你进入quirks mode，就像1995年又一次让你有一个破碎的box model。这就是为什么要写入任何新页面的第一件事就是文档类型。

Here is a link explaining many of the different modes. 向下滚动查看“效果”标题，看看怪癖如何影响浏览器布局。

您唯一的做法是硬着头皮添加文档类型并修复所有标记，因为从现在开始，您只会打一场艰苦的战斗。

【讨论】：

感谢您的回复——我已经添加了文档类型，我遇到的问题是找出哪些样式或标记在退出怪癖模式后无法正确呈现
@michaelzr 取决于风格，但请阅读我关于怪癖模式的链接。当您在那里时，边距等的放置方式不同，这就是为什么一切都会错位的原因。你永远不想处于怪癖模式。
我已经浏览了该页面，稍后我会更仔细地查看它。我觉得这与固定附件的 div 背景图像有关……不确定边距在哪里发挥作用。但是是的，我真的很难弄清楚什么不符合 html5 标准。我一直在修补这个项目，以至于我现在真的看不到森林的树木：/。感谢您的意见
如果您想知道效果是什么，请访问我的链接了解不同模式，然后向下滚动约三分之一的“效果”标题。