溢出：隐藏不在Chrome上运行

Question

在开始使用媒体查询进行设备调整之前，我正在测试所有浏览器上的网站。

我发现了一个问题：当动态影响任何元素时，overflow:hidden属性不再适用于Chrome上的该元素。

您可以在此处查看：http://germanalvarez.net/5/

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

• 如果您在Chrome中，则面板的顶部（归类为.titlePanel）将不再保留overflow:hidden，因此图标的溢出部分将不在{ {1}}（见图）。这仅在更改部分时发生。

• 如果您使用的是Firefox，即使更改了部分，它仍然会隐藏，所以在这里，它可以正常工作。

我在网上找到了一个假设的解决方案：标签上的样式元素。如果您检查我的代码，您会看到titlePanel有这个开头标记，但它也不起作用：

.titlePanel

Answer 1

这是由使用position: 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时，您的伪元素完全不在流量之内。它已不再受其父母overflow: hidden的影响。

要解决此问题，请移除此固定位置并改为使用absolute：

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