谷歌瀏覽器的位置：固定邊框半徑溢出：隱藏問題

Question

我遇到谷歌瀏覽器問題，使用border-radius上的position:fixed元素與overflow:hidden。 overflow屬性似乎不起作用。當您將鼠標懸停在導航項上時，帶有紅色背景div的.bmopt應該被剪裁成#mstrip的形狀，但它只是顯示爲標準矩形。

HTML：

<div id='mstrip'> 
    <div class='mlabel first'> 
     <a href='#' class='mopt'>Item1</a> 
     <div class='bmopt'></div> 
    </div> 
    <div class='mlabel'> 
     <a href='#' class='mopt'>Item2</a> 
     <div class='bmopt'></div> 
    </div> 
    <div class='mlabel'> 
     <a href='#' class='mopt'>Item3</a> 
     <div class='bmopt'></div> 
    </div> 
    <div class='mlabel'> 
     <a href='#' class='mopt'>Item4</a> 
     <div class='bmopt'></div> 
    </div> 
    <div class='mlabel'> 
     <a href='#' class='mopt'>Item5</a> 
     <div class='bmopt'></div> 
    </div> 
</div> 

CSS：

#mstrip { 
    width: 92px; 
    height: 223px; 
    position: fixed; 
    top: 20px; 
    border-radius: 40% 8px; 
    z-index: 100; 
    background: #000; 
    overflow: hidden; 
    box-shadow: 0 0 4px #000; 
} 
.mlabel { 
    width: 92px; 
    height: 35px; 
} 
.first { 
    margin-top: 24px; 
} 
.mopt { 
    display: block; 
    width: 92px; 
    height: 29px; 
    padding-top: 6px; 
    text-align: center; 
    color: #FFF; 
    text-decoration: none; 
    font: menu; 
    font-size: 0.9em; 
    text-shadow: 0 0 1px #FFF; 
} 
.bmopt { 
    position: relative; 
    width: 92px; 
    height: 35px; 
    background: #F00; 
    margin-top: -35px; 
    z-index: -1; 
} 

下面是這個bug的工作示例：http://jsfiddle.net/UxLHR/7/

有沒有解決的辦法？

Answer 1

我認爲問題在於元素不透明度的改變;這會創建一個單獨的堆棧上下文，並且可能是該錯誤的來源。

我解決了它，使它更簡單;只需在懸停時更改mlabel類的顏色，然後在其上設置轉換即可。我不認爲內部的div是必要的。

.mlabel { 
    width: 92px; 
    height: 35px; 
    background-color: black; 
    -webkit-transition: background-color 1s; 
} 
.mlabel:hover { 
    background-color: red; 
} 

updated fiddle

（過渡僅適用於WebKit的）