在严格模式下无法修复模态高度，怪癖模式真的那么糟糕吗？答案

【问题标题】：Can't fix modal height in Strict Mode, is Quirks Mode really that bad?在严格模式下无法修复模态高度，怪癖模式真的那么糟糕吗？
【发布时间】：2016-11-27 20:57:20
【问题描述】：

我是一名从事独立项目的后端开发人员，因此请原谅可能会缺乏任何知识。我正在使用一个名为 AdminLTE 的免费和开源管理面板模板，其中包含一堆模式。我已经研究了一段时间，一切都很好，除了我没有注意到没有声明一个文档类型。使用标准并且（据我所知）强烈推荐 html5 严格模式<!DOCTYPE html> 我所有的模态都完全打破并超出了它们的界限。

就像我说的，我是一名后端开发人员，我只是看不到这条隧道尽头的曙光，所以我的问题是：怪癖模式真的那么糟糕吗？我已经在最新的 Chrome、Mozilla 以及三星在最新的 Android 上使用的任何东西上测试了我的页面，并且所有这些都运行良好且完全相同。

我将在此处附上我的具体问题，但是由于这违反了规则，这里的主要问题是怪癖模式在 2016 年是否仍然被认为是不好的做法。我意识到到处都有关于这个主题的几十个帖子，但没有一个非常新的，我们已经慢慢超越了 Windows XP 和旧版本的 IE，我觉得争论可能会有所不同。

模态看起来像这样，admins-modal-contentdiv 使用 jQuery 的 load() 或 html()（如果需要 POST）填充。

<div class="modal fade" id="admins-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog c-modal-wrapper">
    <div class="modal-content bg-black" >
        <div id="admins-modal-content">
            <div class="c-modal-topbar">
                <h4>Admins</h4>
            </div>

            <div id="admins-modal-contentdiv" class="c-modal-content">

            </div>

            <div class="c-modal-bottombar">
                <a class="btn btn-app" onclick="$('#admins-modal').modal('toggle');">
                    <i class="fa fa-arrow-left"></i> Back
                </a>
            </div>
        </div>
    </div>
</div><!-- /.modal-dialog -->
</div><!-- /.modal  -->

相关的 CSS 看起来像这样

.c-modal-wrapper{
    height:80%;
}

.c-modal-topbar{
    font-weight:bold;
    padding: 0px 0px 20px 0px;
    width:95%;
    margin-left:auto;
    margin-right:auto;

}

.c-modal-content{
    overflow-y:auto;
    height:65%;
    width:100%;
}

.c-modal-bottombar{

}

没有文档类型

与<!DOCTYPE html>

在这一点上，我想放弃并只使用 quirks 模式，但由于我想在未来的项目中依赖这种模板/模式使用风格，所以我想坚持标准，这样它就不会结束最终坏了。我为此投入了数百小时的工作，我担心这一切都会白费。

如果您有空闲时间并想看一下，您可以查看显示问题HERE 的示例页面，只需单击“显示模态”。 HERE 是它按预期工作的一个示例，没有任何 doctype 声明。除了 doctype 声明之外，这些页面都是相同的，都包含相同的 CSS 和 JS 文件。

再次抱歉违反规则，我无处可求助。感谢阅读。

【问题讨论】：

您发布的 CSS 未传达您在图像中显示的结果。因为您显示的 CSS 按预期工作。您显示的溢出是由于其他原因造成的，因此除非您可以创建一个显示问题的实际示例，否则我们将无法提供帮助。但是，让模态框保持在可视区域边界内并不困难。
@junkfoodjunkie 我已经直接从网站上复制了所有内容，添加/删除文档类型与图像中的完全一样。该示例在我提供的测试帐户中可用，但我现在将制作一个可直接链接的示例以使其更容易。
@junkfoodjunkie 我更新了问题，添加了新的易于访问的示例。 hosting.r4ge.ro/test.php
这似乎是一种神奇的想法。 “我改变快速/严格模式，事情就坏了。因此严格模式不好/没用”。这里隐藏的方面是简单的行为改变，你需要弄清楚如何在新的环境中达到预期的结果，这是完全可能的。 Quirks 模式的存在是为了向后兼容。如果您不想更改任何内容并保持旧应用程序运行，那么它就可以实现其目的。如果你真的想编写能够在浏览器之间提供一致行为的现代代码，那么它就是不适合这项工作的工具。
@the8472 老实说，我主要添加了该部分，而不是使其成为一个完全具体的“为我解决此问题”的问题。我知道怪癖与我需要的完全相反，因为我基本上是在创建一个新网站并询问是否使用向后兼容功能。我完全理解为什么会出现问题，但是我不知道是什么原因造成的，甚至不知道从哪里开始寻找。

标签： css html quirks-mode

【解决方案1】：

标准模式和怪癖模式之间最大的区别在于盒子模型。当您切换到标准模式时，这听起来像是在咬您并破坏您的模态。

好消息是这个特殊问题在 CSS 中很容易解决。有一个标准的 CSS 属性可以让你切换盒子模型，这样即使你在标准模式下，你也可以让它在怪癖模式下工作。

激活它所需要做的就是：

box-sizing: border-box;

将此样式添加到您的样式表中，以便它影响您需要的任何元素。这可能只是您的模式，也可能是您的整个页面。

所以我的问题是：怪癖模式真的那么糟糕吗？

嗯，从上面可以看出，主要区别是明确定义的，可以在任一模式下切换。所以在这方面，不，不是。

所有主要浏览器的最新版本确实将怪癖模式视为几乎相同，因为它已标准化。这并不完美，但可以接受。

但是，quirks 模式确实有其他含义，尤其是对于较旧的浏览器。例如，任何使用 IE10 或更早版本的用户不仅会获得 quirks 模式框模型，而且还会禁用许多其他浏览器功能，因为旧 IE 版本中的 Quirks 模式实际上是 IE5 兼容模式。 IE11 支持这种模式和第二个怪癖模式，它改变了盒子模型但不会破坏其他一切。不过，要知道你会得到哪一个并不总是那么容易。

人们仍然使用这些旧版本的 IE，所以这意味着如果您的网站使用 quirks 模式，您网站的某些用户将会获得非常非常糟糕的体验。

其他浏览器的旧版本也可能做类似的事情。

怪癖模式的特点是它有点名副其实 - 有怪癖，如果您的网站使用它，那么您的生活就会变得更加艰难，因为您永远不知道自己什么时候会被抓到由他们出来。当切换到标准模式如此简单时，似乎很难证明为什么有人会使用它。如果你在维护一个旧系统，但肯定不是为了新代码。

【讨论】：

我已经阅读了很多关于 Quirks Mode 以及 IE 6 到 8 如何为它模拟 5.5 以及之后所有其他 IE 模拟 version-1 的内容。您认为这是对我的问题、兼容性和未来可维护性的可接受解决方案吗？
可接受的解决方法是使用标准模式和box-sizing:border-box。如果可以的话，我会避免怪癖模式（使用box-sizing 很容易避免），并且绝对避免 IE 的其他兼容模式，因为它们真的很糟糕（即使你确实认为你需要使用它们，也有一些已知的错误在我看来，这使它们实际上毫无价值）。
嗯，我试过了，但它不起作用。首先尝试将该属性应用于.modal 类，然后添加html { box-sizing: border-box;}，但它仍然无法正常工作。（看看hosting.r4ge.ro/test.php）
好的。好吧，您将需要使用星形选择器 - * {box-sizing:border-box;} 而不是 html {...}，因为 box-sizing 不会沿树继承。但是，我注意到您正在使用 Boostrap，它实际上已经包含此功能，因此您实际上应该对此没问题。这意味着您被怪癖模式的其他怪癖之一所吸引，我需要更深入地挖掘才能找到它。不幸的是，你在我一天结束时抓住了我，所以我不太可能有时间提供更多帮助。不过，如果我发现任何东西给你，我会告诉你的。
没关系，我会继续努力弄清楚，问题是对我来说，这主要是反复试验以及盲目搜索，因为我完全不知道这些东西。我已经开始开发同一模板的早期版本，它要么不包含 doctype 声明，要么在不知不觉中将其删除。由于新版本不再包含模态演示，我认为模板的开发人员也无法弄清楚。感谢您的帮助，祝您有个愉快的夜晚。

【解决方案2】：

您需要添加两个 CSS 规则：

#serverconsole-modal-content {
  height: 40em;
}
.c-modal-bottombar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

这限制了模态的长度，并将底栏定位在模态的实际底部。

【讨论】：

我已经尝试将它应用到整个网站，但它看起来有点拙劣（i.imgur.com/WIbhZm1.png）。在我的手机上更糟糕，所以它没有响应。我想保持百分比，因为并非所有模式都只有文本内容。
好吧，似乎完整的内容不需要 .c-modal-bottombar CSS，然后 - 尝试不使用。如果它没有响应，请添加 @media-rules 以使其响应。 % 不起作用，否则我会使用它。

【解决方案3】：

好的，所以我已经设法解决了我的特定问题。

发生的事情是模态的内容溢出了它的父级设置的高度。出于某种原因，在 Quirks Mode 中，这个高度得到了尊重。我仍然不确定是什么导致了这种情况发生，但是在溢出内容（部分）解决问题之前，在所有父母上设置 height:100%。

我首先从父母那里删除了高度，以使黑色背景仅延伸到页脚结束，但是通过强制 100% 高度，我的页脚下出现了一些额外的空白空间，也就是 c-modal-bottombar 类.这是因为我一开始并没有将页脚强制到 div 的底部。即使我这样做了，结果也会很糟糕，因为内容不会延伸以填补空白。

如果有人发现自己处于类似情况，那么，如果您有可变大小的页眉/页脚，则不能这样做。

我最终使它看起来像我想要的方式是重新绘制整个模态，像这样。

<div class="modal fade" id="admins-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog c-modal-wrapper">
        <div class="c-modal-topbar bg-black">
            <div class="c-modal-topbar-content">
                <h4>Admins</h4>
                To add a new admin, search for a player in 'Manage Players' and edit his rank.
            </div>
        </div>

        <div id="admins-modal-contentdiv" class="modal-content bg-black c-modal-content">
        </div>

        <div class="c-modal-bottombar bg-black">
            <a class="btn btn-app" onclick="$('#admins-modal').modal('toggle');">
                <i class="fa fa-arrow-left"></i> Back
            </a>
        </div>
    </div><!-- /.modal-dialog -->
</div><!-- /.modal needs to be above adminranks for stacking modals to work -->

一些无用的 div 被移除，它们的类合并为一个

.c-modal-wrapper{
    height:80%;
}

.c-modal-testing{
    height:100%;
}

.c-modal-topbar{
    width:100%;
}

.c-modal-topbar-content{
    width:95%;
    margin-left:auto;
    margin-right:auto;
    font-weight:bold;
}

.c-modal-content{
    overflow-y:auto;
    height:65%;
    width:100%;
}

.c-modal-bottombar{

}

虽然不太可能，但我希望这至少能帮助另一个人，所以不要浪费阅读本文和回答的人的时间。

再次感谢您没有否决我的遗忘（或锁定我的 q）。

【讨论】：