0

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

http://jsfiddle.net/HUHqA/2/

在此示例中，您单击展开左侧面板的绿色矩形。通过 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;
}

然后后者被删除。

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

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

4

1 回答 1

0

!important您应该可以通过使用它来摆脱：

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

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

于 2012-11-14T22:45:48.623 回答