溢出隐藏在移动浏览器上不起作用

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 元素的角超出了父元素的圆角。我该如何解决这个问题？

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>