Question

我构建了一个小行为示例。基本上，我有一个页面左侧有一个可扩展的窗格。当它扩展时，Chrome似乎无法更新CSS。

在此示例中，单击展开左侧面板的绿色矩形。通过JQuery将css类移除到右侧的面板。似乎CSS类没有被应用，直到有某种布局动作。例如，如果您稍微调整页面大小，或者如果您打开开发人员工具并取消选中一些随机CSS。当您执行该操作时，蓝色矩形的边缘将跳转到应该的位置。

看起来它可能与覆盖其他类的一个类中的！important有关。

最初它有这两个类：

#main-content-right{
    min-width:200px;
    padding:0 15px 0 100px;
    margin-bottom:10px;
    z-index:1;
    min-height:300px;
}

.main-content-collapse-right{
    padding:0 150px 0 29px !important;
}

然后删除后者。

如果您取消注释我的黑客功能中的行，则修复它。我基本上有两个问题 1）这是浏览器本身的错误吗？ 2）有没有比仅仅切换一些随机css更好的解决方案？

编辑：问题1的答案似乎是肯定的：https://bugs.webkit.org/show_bug.cgi?id=93876简化演示：https://bug-93876-attachments.webkit.org/attachment.cgi?id=158063

Answer 1

你应该能够通过使用它来摆脱!important：

#main-content-right.main-content-collapse-right{
 padding:0 150px 0 29px;
}

如果包含id，则特异性应该足够高，!important是不必要的。

Webkit（Chrome，Safari）浏览器无法在JQuery addClass之后更新CSS

1 个答案: