为什么已经计算的样式只有在切换 devtools 后才能工作?(IE 和边缘)

Question

我有一个这样的css类：

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

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

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

真正奇怪的是，当我在IE/Edge开发人员工具中关闭并再次打开边距时，它突然修复/应用自己并按预期显示。

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

• 铬：https://youtu.be/LQz3OkVl6WI
• IE11：https://youtu.be/A4gV4ZwUt0w

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

有人有什么想法吗？

Answer 1

刚打开开发工具时它是否适用于现实？

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

---

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