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

问题描述 投票:0回答:1

我正在尝试创建一个跨浏览器对话框系统。基本上,您单击一个链接,然后弹出对话框。出乎意料的是,我在所有主要浏览器(包括IE 11)上都能使用它。唯一的问题是,如果对话框中的内容超出了窗口,则该框在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

感谢您的帮助!

html css internet-explorer internet-explorer-11
1个回答
0
投票

我认为问题出在flexbox。在浏览器兼容性的flex value中,它表示:

IE错误地将内联块内容放置在flex容器中。

如果在display: flex;中删除#dialog-2,则可以解决此问题。您可以像这样更改以下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;
 }
© www.soinside.com 2019 - 2024. All rights reserved.