无法在严格模式下修正模态高度，怪异模式真的很糟糕吗？

我是一个开发独立项目的后端开发人员，请原谅缺乏可能遵循的知识。我正在使用名为AdminLTE的免费开放源代码管理面板模板，以及一堆模块作为其一部分。我一直在努力一段时间，一切都很好，除非我没有注意到文档类型没有声明。使用标准和（据我所知）严重推荐HTML5严格模式<!DOCTYPE html>所有我的模态完全破坏和溢出其界限。无法在严格模式下修正模态高度，怪异模式真的很糟糕吗？

就像我说的，我是一个后端开发人员，我只是不见天日在这个隧道的尽头，所以我的问题是：是怪异模式真的那么糟吗？我已经在最新的Chrome，Mozilla上测试过我的页面，以及三星在最新的Android上使用的任何内容，并且所有内容的一切工作正常。

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

Modal看起来像这样，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

随着<!DOCTYPE html>

在这一点上我想放弃的时候，只是用怪异模式去，但是因为我想依靠这种模板/模式使用风格来实现我想遵守标准，所以它最终不会最终破裂。我已经投入了数百小时的工作，我很害怕这将会浪费。

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

对不起再违规，我无处可去。谢谢阅读。

来源

2016-11-27 aron9forever

您发布的CSS没有传达你的图像显示效果。因为你展示的CSS按预期工作。你显示的溢出是由于其他原因造成的，所以除非你能创建一个显示问题的实际例子，否则我们无法提供帮助。但是，让模态保持在可视区域边界并不困难。 – junkfoodjunkie

@junkfoodjunkie我已经复制了一切从网站上，并添加/删除doctype完全一样的图像。这个例子可以在我提供的测试账户中找到，但是我现在将创建一个可直接链接的例子，以使它更容易。 – aron9forever

@junkfoodjunkie我已经更新了添加新的易于访问的示例的问题。 http://hosting.r4ge.ro/test.php – aron9forever

好了，我已经成功地解决我的具体问题。

发生了什么是模态的含量溢出它的父的设定高度。出于某种原因在怪癖模式这个高度是尊重。我仍然不确定是什么导致了这种情况发生，但在溢出内容（部分）修复问题之前，在所有父母上设置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{ 

}

虽然这是不可能的，我希望这将有助于至少一个其他人，所以谁读这和人们的时间那些回答的人不会被浪费。

再次感谢您没有downvoting我遗忘（或锁定我的Q）。

来源

2016-11-28 21:53:39 aron9forever

您需要添加两个CSS规则：

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

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

来源

2016-11-27 21:56:55 junkfoodjunkie

我试着将其应用到完整的网站，但它看起来有点拙劣（http://i.imgur.com/WIbhZm1.png）。我的手机更糟，所以它没有响应。我想保持它的百分比，因为不是所有的模态都只有文本内容。 – aron9forever

好吧，看起来'.c-modal-bottombar' CSS不是完整内容所需要的，那么 - 尝试不要。如果它不响应，请添加@ media-rules以使其响应。％不会工作，否则我会使用它。 – junkfoodjunkie

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

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

所有你需要这样来激活这个是这样的：

box-sizing: border-box;

这种风格添加到您的样式表，它影响到你需要的任何元素。这可能只是你的模式，或者它可能是你的整个页面。

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

好吧，从上面可以看出，主要差异是明确的，可以在任何一种模式下切换。所以在这方面，不，不是。

最近的所有主要浏览器版本做治疗怪癖模式几乎相同，因为它已经标准化。这并不完美，但它是可以接受的。

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

人做仍然使用这些旧版本的IE，所以这是什么意思是，如果你的网站使用怪癖模式，将有你的网站的一些用户谁就会得到一个非常非常糟糕的经历。

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

怪癖模式的事情是它有点名副其实 - 它有怪癖，如果你的网站使用它，那么你会让自己变得更难，因为你永远不知道自己什么时候会成为被他们抓住了。当切换到标准模式非常容易时，似乎很难证明为什么有人会使用它。也许如果你维护一个旧系统，但肯定不是新代码。

来源

2016-11-27 22:12:44 Spudley

我读了很多关于怪癖模式以及IE 6到8如何模仿5.5，每隔一个IE模拟版本-1之后。你会说这是对我的问题，兼容性和未来可维护性明智的可接受的修复吗？ – aron9forever

可以接受的解决方法是使用标准模式和'box-sizing：border-box'。如果可以的话，我会避免使用怪异模式（并且很容易避免使用“box-sizing”），并且肯定会避免IE的其他兼容模式，因为它们确实很糟糕（即使您确实认为需要使用它们，已知的错误，使我们认为他们实际上毫无价值）。 – Spudley

那么，我试过了，但它不会工作。首先尝试将属性应用到'.modal'类，然后添加'html {box-sizing：border-box;}'但它仍然不起作用。（看看http://hosting.r4ge.ro/test.php） – aron9forever

无法在严格模式下修正模态高度，怪异模式真的很糟糕吗？

回答

相关问题