模态无法在 IE 中正确呈现

Question

模态框的文本渲染正确，但背景仅在屏幕尺寸范围内渲染，当您滚动时它是透明的。

我注意到只有在某些操作发生时才会呈现背景，例如单击该模式上的按钮，甚至在我打开开发人员工具时。

虽然这在其他浏览器中可以正常工作。

这里是模态容器的css

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-align: center;
overflow: auto;
background-color: rgba(0,0,0,.7);
cursor: pointer;
z-index: 1000;
display: flex;
flex-direction: column;
align-items: center;

以及模态本身

background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;

知道 IE 的渲染情况吗？

Answer 1

我找到了解决这个问题的方法。在此模态中，我实际上正在呈现另一个 div（在不同页面中具有不同的文本和操作组成），它继承了此 css:

background-color: ${colors.white};
display: inline-block;
margin-top: 50px;
text-align: left;
cursor: initial;

但显然，当您向下滚动并加载新内容时，该样式不适用。再次将 background-color: ${colors.white}; 添加到模态内呈现的 div 后，一切看起来都不错。

模态无法在 IE 中正确呈现

Modal not rendering correctly in IE

internet-explorer

modal-dialog

reactjs