Edge上的CSS属性选择器不触发规则

Question

我有以下HTML代码：

<div class="mydiv0" style="display: none"></div>
<div class="mydiv1"></div>

并遵循CSS规则：

.mydiv1 {
    height: calc(100% - 360px);
    max-height: calc(100% - 10px);
}

.mydiv0[style*="display: none"] + .mydiv1 {
    height: 100%;
    max-height: 100%;
}

在Chrome中，一切正常。在Edge上，当我使用javascript在"display: block"上设置mydiv0时，mydiv1的样式不会更新。

如果我打开开发人员工具并点击mydiv1进行检查，则会立即更新样式。

这个问题有解决方案吗？

Answer 1

不要直接设置样式属性，而是使用类：

<div class="mydiv0 hidden"></div>
<div class="mydiv1"></div>

使用此CSS

.hidden {
   display: none;
}
.mydiv1 {
    height: calc(100% - 360px);
    max-height: calc(100% - 10px);
}

.mydiv0.hidden + .mydiv1 {
    height: 100%;
    max-height: 100%;
}