internet-explorer - 为什么已计算的样式仅在 devtools 中切换后才有效？ (IE 和 Edge)

Question

我有一个这样的 css 类:

.open-drawer {
  transform: translateX(0px);
  border-left: 1px solid grey;
  margin-left 3px;
}

这个类被添加到一个 div 上，当用户点击一个按钮时，div 将它滑出到 View 中。 margin-left说它是在 IE11/Edge 开发人员工具中计算的，它没有被覆盖或任何东西，但实际上没有出现在浏览器中。

这是特定于 IE 和 Edge 的，在 Chrome 和 Firefox 中它按预期工作。

真正奇怪的是，当我在 IE/Edge 开发人员工具中关闭和打开 margin-left 时，它突然修复/应用自身并按预期显示。

这些短片是为了帮助查看边距在 Chrome 中可见但在 IE 中不可见。边距是最明显的双线之间的间隙，即打开抽屉的左边框。在 Chrome 中，我们看到了这一点，但在 IE 中，直到我们在 devtools 中关闭和打开属性，如视频所示:

Chrome :https://youtu.be/LQz3OkVl6WI

IE11:https://youtu.be/A4gV4ZwUt0w

我有一种感觉，这可能与渲染引擎进行布局的时间有关，并且变换/翻译可能会影响它，但真的不知道。不确定如何进一步缩小正在发生的事情的范围，Trident 或 EdgeHTML 的源代码是专有的。

任何人的想法？

Answer 1

刚刚打开开发工具时，它是否可以正常工作？

如果代码中有 console.log，但开发工具已关闭 - IE 返回错误。你需要编码 var console = { log : function(t){}};在 js 开头的某个地方或删除所有控制台日志。

这是已知问题之一，也许我没有正确理解您的任务。