严格模式无法修复模态高度，Quirks Mode 真的有那么糟糕吗？

Question

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

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

我会在这里附上我的具体问题，但是因为这是违反规则的，这里的主要问题是怪癖模式在 2016 年是否仍然被认为是不好的做法。我意识到到处都有关于这个话题的几十篇文章，但是 none 其中非常新，我们已经慢慢超越了 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>

在这一点上我想放弃并继续使用怪癖模式，但由于我想在未来的项目中依赖这个模板/模式使用风格，我想坚持标准，所以它不会最终被打破。我为此投入了数百小时的工作，我担心这一切都会白费。

如果您有空闲时间想看看，可以查看显示问题的示例页面 HERE, just click on "Show Modal". An example of it working as expected, without any doctype declaration, is HERE。除了 doctype 声明外，这些页面完全相同，都包含相同的 CSS 和 JS 文件。

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

Answer 1

您需要添加两个 CSS-规则：

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

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

Answer 2

标准模式和 quirks 模式最大的区别是盒子模型。听起来这就是当您切换到标准模式时困扰您并破坏您的模式的原因。

好消息是这个特殊问题在 CSS 中很容易解决。有一个标准 CSS 属性允许您切换盒子模型，这样即使您处于标准模式，您也可以让它以 quirks 模式工作。

激活它所需要做的就是：

box-sizing: border-box;

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

so my question is: Is quirks mode really that bad?

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

所有主流浏览器的最新版本都以几乎相同的方式对待 quirks 模式，因为它已经标准化。不完美，但可以接受

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

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

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

怪癖模式有点名副其实 - 有怪癖，如果您的网站正在使用它，那么您会让自己的生活更加艰难，因为您永远不知道什么时候要被他们抓住。当切换到标准模式如此容易时，似乎很难证明为什么有人会使用它。也许如果您正在维护旧系统，但肯定不是为了新代码。

Answer 3

好的，我已经解决了我的特定问题。

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

我首先从 parent 中删除了高度，以使黑色背景仅拉伸到页脚的末尾，但是通过强制 100% 高度，一些额外的空白 space 出现在我的页脚下，又名 c-modal-bottombar class。这是因为我一开始就没有将页脚强制到 div 的底部。即使我这样做了，结果也会很难看，因为内容不会延伸以填补空白。

如果有人发现自己处于类似情况，那么，如果你的大小可变，你就不能这样做 headers/footers。

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

<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，它们的class合并为一个

.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）。

严格模式无法修复模态高度，Quirks Mode 真的有那么糟糕吗？

Can't fix modal height in Strict Mode, is Quirks Mode really that bad?

html

css

quirks-mode