我在使用
这里有一个关于这个bug的工作示例:http://jsfiddle.net/UxLHR/7/ 有没有什么解决方法?
border-radius
对position:fixed
元素进行样式设置时,遇到了Google Chrome的问题,同时使用了overflow:hidden
属性,但似乎不起作用。当您悬停在导航项上时,红色背景的.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;
}
这里有一个关于这个bug的工作示例:http://jsfiddle.net/UxLHR/7/ 有没有什么解决方法?