溢出隱藏不顯示在移動瀏覽器的工作

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;

.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>