Chrome 更新后 CSS 类型选择器错误地正确应用

Question

昨天我将 Chrome 更新到版本 24，在执行此操作之后，我应用到选择器的 display:none 属性似乎没有应用。

我有一个将应用 display:block 的 first-of-type 选择器，它似乎适用于该类型的所有成员，除了最后一个。

当我在 Chrome 开发人员工具中禁用/启用此 css display 属性时，display:none 确实得到了正确应用。开发人员工具甚至将 display 显示为 none，同时仍允许从网页中选择元素

此行为适用于以前版本的 chrome 和 firefox。

有什么方法可以强制触发此行为？

我目前尝试设置一个不同的类来应用 Javascript 中的显示逻辑，但我更愿意使用 CSS 解决方案。

编辑

还有一个来自“用户代理样式表”的“div {display:block;}”，虽然这在开发人员工具中被标记为覆盖，也许这就是问题的一部分？

Answer 1

如果您遇到的问题是使用 display:block/none 来“打开和关闭”元素；可能是 Chrome 很久以前遇到的渲染问题。

有时用显示替换内容会导致 Chrome 中的重绘问题，即使控制台显示属性被替换，它也不会影响窗口及其元素。

尝试将此添加到您要隐藏/显示的元素中:

-webkit-transform: translate3d(0,0,0);

或者，如果您对 X 和 Y 使用翻译，只需添加:

-webkit-transform: translateZ(0); // This affects only the Z preserving X and Y

您还可以在 this answer 中阅读对浏览器进行转换操作以使其“起作用”的确切内容。由 Yotam Omer 制作