css - 隐藏的溢出不适用于移动浏览器

Question

在 android (2.3.3) 移动浏览器和 Opera Mini 上进行测试，我发现我网站上的几个容器 overflow:hidden 正在显示溢出...

这是有问题的元素之一的示例:

<div class="button">
  <span>Some Text</span>
</div>

.button {
  display:inline-block;
  position:relative;
  padding:10px;
  border:1px solid black;
  border-radius:100px;
  overflow:hidden;
}
.button:before {
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  background-color:blue;
  mix-blend-mode:multiply;
}

.button span {
  position:relative;
  z-index:1;
}

在移动浏览器上，您可以看到 :before 元素的 Angular 超出了父元素的圆 Angular 。我该如何解决这个问题？

Answer 1

MM..我不知道你在什么浏览器上测试这个，但我可以说它在 chrome 上工作得很好......

当您可以简单地添加 background-color: blue;

时，我认为不需要为背景添加 :before

.button {
  display:inline-block;
  position:relative;
  padding:10px;
  border:1px solid black;
  border-radius:100px;
  overflow: hidden;
  background-color: blue;
}

.button span {
  position:relative;
  z-index:1;
}

<div class="button">
  <span>Some Text</span>
</div>