在 Internet Explorer 11 中将 flex 用于对话框时容器被切断

Question

我正在尝试创建一个跨浏览器的对话框系统。基本上，您单击 link，对话框就会弹出。令人惊讶的是，我让它可以在所有主要浏览器上运行，包括 IE 11。唯一的问题是如果对话框内的内容超过 window，则该框在 IE 11 中被截断。这是代码：

/* Core styles */
html,
body {
    position: absolute;
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    left: 0;
    top: 0;
}
.page {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.content-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    box-sizing: border-box;
    overflow: auto;
}
.card {
    position: relative;
    box-sizing: border-box;
    margin: 3rem;
    padding: 3rem;
    color: rgba(0, 0, 0, 0.8);
    background-color: #ffffff;
    border-radius: 0.4rem;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/* Dialog styles */
.dialog-outer {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    -webkit-transition: all .4s cubic-bezier(.25, .8, .25, 1);
    transition: all .4s cubic-bezier(.25, .8, .25, 1);
    z-index: 99;
    outline: none;
}
.dialog-outer .dialog-inner {
    height: 100%;
    overflow: auto;
}
.dialog-outer .dialog-inner .dialog-content {
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.dialog-outer .dialog-inner .dialog-content .card {
    margin: auto;
}
.dialog-outer:target {
    top: 0;
}
.dialog-outer:target ~ .page .content-wrapper {
    overflow: hidden;
}
.dialog-outer:target .dialog-content {
    top: 0;
}

<!-- Dialog 1 -->
<div class="dialog-outer" id="dialog-1">
  <div class="dialog-inner">
    <div class="dialog-content">
      <div class="card" style="width: 400px;">
        <strong>Dialog 1</strong>
        <br /><br />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#">Close</a>
      </div>
    </div>
  </div>
</div>

<!-- Dialog 2 -->
<div class="dialog-outer" id="dialog-2">
  <div class="dialog-inner">
    <div class="dialog-content">
      <div class="card" style="width: 400px;">
        <strong>Dialog 2 (long scrolling content)</strong>
        <br /><br />
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <a href="#">Close</a>
      </div>
    </div>
  </div>
</div>

<!-- Page -->
<div class="page">
  <div class="content-wrapper">
    <div style="padding: 20px;">
      <!-- Toggles -->
      <a href="#dialog-1">Toggle dialog 1</a>
      <br /><br />
      <a href="#dialog-2">Toggle dialog 2</a>
    </div>
  </div>
</div>

大量的代码基本上生成了 2 个对话框。一个内容很小，所以不超过页面长度，另一个需要滚动。不幸的是，第二个对话框在 IE 11 中被截断了。它适用于我测试过的所有其他浏览器，包括一些旧版本的 Edge 和 Firefox。 IE 11 到底是什么问题？

理想的答案是不需要更改 HTML 标记和核心样式。

您可以在此处将上述代码作为 HTML 文件下载：https://anonfile.com/933cv8o0o0/dialog_html

感谢您的帮助！

Answer 1

我认为问题出在 flexbox 上。在浏览器兼容性的flex value里面写着：

IE incorrectly positions inline block content inside flex containers.

如果您删除 #dialog-2 中的 display: flex;，问题可以得到解决。您可以像这样更改以下 css 样式：

.dialog-outer .dialog-inner .dialog-content {
    position: absolute;
    box-sizing: border-box;
    /*display: flex;*/
    flex-direction: column;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;                    
 }

 #dialog-1 .dialog-inner .dialog-content {
    display: flex;
 }