Question

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

就像我说的那样，我是后端开发人员，而我只是看不到隧道末端的灯光，所以我的问题是：怪癖模式真的那么糟糕吗？ / strong>我已经在最新的Chrome，Mozilla以及三星在最新Android上使用的所有内容上测试了我的页面，所有这些内容都运行良好且相同。

我会在这里附上我的具体问题，但是由于这违反了规则，这里的主要问题是2016年怪癖模式是否仍然被视为不良行为。我发现有几十个帖子关于这个话题到处都是，但没有一个是新的，我们已经慢慢超越Windows XP＆amp; IE的旧版本，我觉得参数可能不同。

模态如下所示，如果需要POST，则使用jQuery＆＃39; s admins-modal-contentdiv或load()填充html()。

<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> </div>

相关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

<!DOCTYPE html>

此时我觉得放弃并且只是采用怪癖模式，但由于我希望在未来的项目中依赖这种模板/模态使用方式，我希望坚持标准，因此它没有＆＃39最终结束了。我已经投入了数百小时的工作，我害怕它们都会浪费。

如果您有空闲时间并希望查看，可以查看显示问题HERE的示例页面，只需点击＆＃34;显示模态＆＃34;。它没有任何doctype声明，按预期工作的示例是HERE。除了doctype声明之外，页面都是相同的，两者都包含相同的CSS和JS文件。

再次抱歉打破规则，我无处可去。谢谢你的阅读。

Answer 1

标准模式和怪异模式之间的最大区别是盒子模型。当你切换到标准模式时，听起来这就是咬你并打破你的模态。

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

您需要这样才能激活它：

box-sizing: border-box;

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

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

嗯，正如您从上面所看到的，主要区别很明确，可以在任一模式下切换。所以在这方面，不，不是。

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

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

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

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

怪癖模式的事情是，它有点辜负它的名字 - 有怪癖，如果你的网站正在使用它，那么你会让自己的生活变得更加艰难，因为你真的不知道你什么时候去被他们抓住了。当切换到标准模式如此简单时，似乎很难证明为什么有人会使用它。也许如果您维护一个旧系统，但肯定不是新代码。

Answer 2

您需要添加两个CSS规则：

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

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

Answer 3

好的，所以我设法修复了我的特定问题。

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

我首先从父母身上移除了高度，使黑色背景延伸直到页脚结束，但是通过强制100%高度，我的页脚下出现了一些额外的空白空间，即{{{ 1}}类。这是因为我没有首先将页脚强制到div的底部。即使我这样做了，结果也会很难看，因为内容不会延伸到填补空白。

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

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

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 -->

虽然不太可能，但我希望这对至少另一个人有帮助，所以读这篇文章和回答者的时间不会浪费。

再次感谢你没有贬低我（或锁定我的q）。

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

3 个答案: