在使用 overflow:hidden
的 position:fixed
元素上使用 border-radius
时,我在使用 Google Chrome 时遇到问题。 overflow
属性似乎不起作用。当您将鼠标悬停在导航项上时,红色背景 .bmopt
的 div
应该被剪裁成 #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;
}
这是这个错误的一个工作示例:http://jsfiddle.net/UxLHR/7/
有解决办法吗?
最佳答案
我认为问题出在改变元素的不透明度;这会创建一个单独的堆栈上下文,并且可能是错误的来源。
我已经解决了它,让它变得更简单;只需在悬停时更改 mlabel 类的颜色,并为此设置过渡。我认为内部 div 不是必需的。
.mlabel {
width: 92px;
height: 35px;
background-color: black;
-webkit-transition: background-color 1s;
}
.mlabel:hover {
background-color: red;
}
(仅适用于 webkit 的过渡)
关于google-chrome - 谷歌浏览器位置 :fixed border-radius overflow:hidden issue,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16122782/