Angular在IE11中[style.display]异常：双向绑定失效问题

哈哈，这个坑我在做IE11兼容的Angular项目时踩过！太懂这种明明逻辑没问题但就是不生效的憋屈感了😅

问题根源 #

核心问题出在IE11对CSS的initial关键字支持有严重bug：它没法正确解析display: initial这个值。当你的条件为true时，Angular确实尝试把display设为initial，但IE11直接忽略了这个值，相当于没设置display属性；而元素可能因为默认样式或之前的状态保持了display: none，所以看起来始终是隐藏的。

反观你测试的其他方式：

• opacity的0和1是IE11完全支持的属性值，没有解析bug，所以绑定能正常工作
• 类绑定是直接添加/移除包含明确display值（比如block）的类，IE11能正确识别类里的CSS规则，所以也没问题

解决方案 #

方案1：替换initial为IE11支持的具体display值

别用initial了，根据你的组件实际布局需求，换成block、inline-block或inline这些IE11能识别的明确值。比如：

<!-- 用[style.display] -->
<cm-configure-add-cart class="configure" [style.display]="!configWorkflowComp.visible ? 'none' : 'block'"></cm-configure-add-cart>

<!-- 或者用ngStyle -->
<cm-configure-add-cart class="configure" [ngStyle]="{'display': !configWorkflowComp.visible ? 'none' : 'inline-block'}"></cm-configure-add-cart>

这样IE11就能正确解析display的值，元素就能正常显示/隐藏了。

方案2：继续用类绑定（推荐）

既然类绑定已经生效，这其实是更稳妥的做法——尤其是在兼容旧浏览器时，代码可读性和维护性都更好。先定义一个CSS类：

.configure-hidden {
  display: none;
}

然后绑定类：

<cm-configure-add-cart class="configure" [class.configure-hidden]="!configWorkflowComp.visible"></cm-configure-add-cart>

这种方式直接避开了IE11对initial的兼容性坑，逻辑也更清晰。

内容的提问来源于stack exchange，提问作者Vikhyath Maiya