样式 Visibility:visible 在 IE11 上不能间歇性工作（在 chrome 和 firefox 上工作正常）

Question

我在 view.I 上显示了一个点击按钮的弹出窗口，使用 visibility: visible 来显示它在 chrome 和 firefox 以及 class 是从设计系统 itself.where 继承的，因为在 IE11 上它的透明度很高，而我希望它是 opaque.can 我覆盖了从设计系统继承的父 class ？或任何其他解决方案我试过

opacity: 1;
z-index: 1;
background-color: rgba(white,100%);
transition: opacity 200ms;
visibility: visible

尝试使用 !important 或覆盖继承的 class 时没有任何效果

Answer 1

能否提供a minimal, reproducible sample？我做了一个简单的示例来更改样式 visibility: visible 可以在 IE 11 中正常工作:

function changecss() {
  document.getElementById("test").style.visibility = "visible";
}

#test {
  opacity: 1;
  z-index: 1;
  background-color: rgba(white, 100%);
  transition: opacity 200ms;
  visibility: hidden;
}

<input type="button" value="test" onclick="changecss()" />
<div id="test">test pop up!</div>

如果不能解决您的问题，请提供包含相关 html、css 和 javascript 的代码片段以重现该问题，以便我们测试我们的看看如何提供帮助。

Answer 2

我通过增加 transition: opacity 200ms 到 transition:opacity 500ms 来解决这个问题，现在它工作正常，弹出窗口是不透明的，不像我预期的那样透明

opacity: 1;
z-index: 1;
background-color: rgba(white,100%);
transition: opacity 500ms;
visibility: visible

样式 Visibility:visible 在 IE11 上不能间歇性工作（在 chrome 和 firefox 上工作正常）

style Visibility:visible is not working intermittently on IE11(works fine on chrome and firefox)

css

visibility

sass

opacity

internet-explorer-11