Css 溢出：隐藏不在Chrome上工作

在启动设备适应媒体查询之前，我正在所有浏览器上测试一个站点

我发现了一个问题：当任何元素受到动态影响时，

overflow:hidden

属性不再适用于Chrome上的该元素

你可以在这里看到：

加载站点后，单击面板右下角的菜单按钮，然后单击任意部分：

• 如果使用Chrome，面板的顶部（分类为

  .titlePanel

  ）将不再保持

  溢出：隐藏
  ，因此图标的溢出部分将从
  标题板中消失（见图）。这仅在更改节时发生
  

• 如果你在Firefox中，即使在更改部分后，它也会保持隐藏状态，所以在这里，它可以正常工作。

我在网上找到了一个假设的解决方案：在标签上添加样式元素。如果你检查我的代码，你会看到

。titlePanel

有这个开始标签，但它也不起作用：

<div class="panel titlePanel expanded" style="overflow: hidden;">

---

这是由于使用了

位置：fixed

：

.titlePanel [class^="icon-"]:before, 
.titlePanel[class*=" icon-"]:before {
    font-size: 16em;
    left: 79%;
    line-height: 100%;
    margin: 0 0 0 50px;
    position: fixed;
}

当您使用

fixed

时，您的伪元素完全脱离了流程。它不再受其父对象上任何

溢出：隐藏
的影响

若要修复它，请移除此固定位置，并改用
绝对值
：

[class^="title-"] {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
[class^="title-"] i {
    position: absolute;
    right: 0;
    top: 0;
}

非常感谢。但据我所知，代码的第二部分与问题无关，只是第一部分。更改为绝对后，它已被修复。