因此,在尝试使用 flexbox 制作有用的模式时,我发现似乎是浏览器问题,并且想知道是否有已知的修复或解决方法——或者关于如何解决它的想法。
我要解决的问题有两个方面。首先,使模态窗口垂直居中,这可以按预期工作。第二个是让模态窗口滚动——在外部,所以整个模态窗口滚动,而不是其中的内容(这样你就可以有下拉菜单和其他可以扩展到模态边界之外的 UI 元素——像自定义日期选择器等)
但是,当将垂直居中与滚动条结合使用时,模式的顶部可能会因为它开始溢出而变得不可访问。在上面的示例中,您可以调整大小以强制溢出,这样做可以让您滚动到模式的底部,但不能滚动到顶部(第一段被切断)。
这是示例代码的链接(高度简化)
https://jsfiddle.net/dh9k18k0/2/
.modal-container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
overflow-x: auto;
}
.modal-container .modal-window {
display: -ms-flexbox;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
// Optional support to confirm scroll behavior makes sense in IE10
//-ms-flex-direction: column;
//-ms-flex-align: center;
//-ms-flex-pack: center;
height: 100%;
}
.modal-container .modal-window .modal-content {
border: 1px solid #ccc;
border-radius: 4px;
background: #fff;
width: 100%;
max-width: 500px;
padding: 10px
}
这会影响(当前)Firefox、Safari、Chrome 和 Opera。如果您在 IE10 供应商前缀 css 中评论,它在 IE10 中的行为确实很有趣——我还没有在 IE11 中进行测试,但假设行为与 IE10 的行为匹配.
任何想法都会很好。指向已知问题的链接或此行为背后的推理也会很有用。