[英]Google Chrome position:fixed border-radius overflow:hidden issue
I am having issues with Google Chrome while using border-radius
on a position:fixed
element with overflow:hidden
. 我在使用某个
position:fixed
border-radius
时遇到谷歌浏览器的问题position:fixed
元素overflow:hidden
。 The overflow
attribute does not seem to be working. overflow
属性似乎不起作用。 When you hover over the navigation items the div
with the red background, .bmopt
, is supposed to be clipped to the shape of #mstrip
, but instead it just shows as a standard rectangle. 当您将鼠标悬停在导航项目上时,红色背景的
div
.bmopt
应该被剪裁为#mstrip
的形状,而只是显示为标准矩形。
HTML : 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: 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;
}
Here is a working example of this bug: http://jsfiddle.net/UxLHR/7/ 以下是此错误的一个有效示例: http : //jsfiddle.net/UxLHR/7/
Is there a way around this? 有没有解决的办法?
I think that the problem arises from changing opacity in the element; 我认为这个问题来自改变元素的不透明度; that creates a separate stacking context and is probably the origin of the bug.
这会创建一个单独的堆栈上下文,可能是bug的起源。
I have solved it making it simpler; 我解决了它使它更简单; just changing the color of the mlabel class on hover, and setting a transition on this.
只是在悬停时更改mlabel类的颜色,并在此设置转换。 I don't think that the inner div is necesary.
我不认为内在的div是必要的。
.mlabel {
width: 92px;
height: 35px;
background-color: black;
-webkit-transition: background-color 1s;
}
.mlabel:hover {
background-color: red;
}
(transition only for webkit) (仅适用于webkit)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.