css – 在Safari和MS Edge中以不同方式呈现滚动内容的嵌套Flexbox UI

2019年7月2日 219次阅读

请参阅此 Plunker中页面的冻结DOM状态.

代码应表示具有四个选项卡的模式,其中第三个选项卡内容是打开的.应该看起来像下面的图像(在最新的Chrome中呈现)：三个并排的div包含溢出的内容,div可以滚动.在底部有一个div包含Plotting方法文本和一个按钮. Firefox中也可以看到相同的视图.
 《css – 在Safari和MS Edge中以不同方式呈现滚动内容的嵌套Flexbox UI》

我在最新的Safari中看到的内容：

《css – 在Safari和MS Edge中以不同方式呈现滚动内容的嵌套Flexbox UI》

禁用该样式后
    身高：10px;
来自.heatmap-multiple-variable-container

渲染的Safari内容是：

《css – 在Safari和MS Edge中以不同方式呈现滚动内容的嵌套Flexbox UI》

请注意第三个内容div如何向下滚动,并不像Chrome中那样呈现其所有内容(Select all行).此外,包含绘图方法的div不可见.

在Microsoft Edge中,包含绘图方法的div是可见的,但存在与Safari中相同的滚动问题.

有关如何修改Flexbox布局以便以相同方式为所有三种浏览器显示菜单的任何想法？我真的被卡住了,所以你能给我的任何指示都会受到赞赏.

最佳答案 好的,这是一个艰难的！将此添加到您的CSS,它应该工作. (在Safari中测试)

body .multiple-variable-selection-columns-container {
    height: calc(100% - 66px);
}

body .modal-menu .tab-content {
    height: calc(100% - 57px);
}

body .modal-wide .modal-dialog .modal-content .modal-body {
    height: calc(100% - 110px);
}

ng-include {
    display: block;
}

你增加了高度：100％;具有自己高度的邻居元素的元素.你肯定要清理你的标记,但上面的CSS应该可以正常工作.

我添加了正文以获得更强的选择器来覆盖您的代码.我还为ng-include标签添加了默认显示样式,浏览器不知道要使用哪种样式,因此标签没有高度且难以调试.

我希望我能帮助你.

点赞