Google chrome 谷歌浏览器位置:固定边界半径溢出:隐藏问题
我在使用Google chrome 谷歌浏览器位置:固定边界半径溢出:隐藏问题,google-chrome,overflow,css-position,css,Google Chrome,Overflow,Css Position,Css,我在使用位置上的边界半径时遇到了Google Chrome问题:已修复元素溢出:隐藏。溢出属性似乎不起作用。当您将鼠标悬停在导航项上时,红色背景的div,.bmopt,应该被剪裁成#mstrip的形状,但它只是显示为标准矩形 HTML: <div id='mstrip'> <div class='mlabel first'> <a href='#' class='mopt'>Item1</a> <div
位置上的边界半径时遇到了Google Chrome问题:已修复元素溢出:隐藏。溢出
属性似乎不起作用。当您将鼠标悬停在导航项上时,红色背景的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>
#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;
}
以下是此错误的工作示例:
有办法解决这个问题吗?我认为问题是由于改变元素的不透明度引起的;这会创建一个单独的堆栈上下文,可能是错误的根源
我解决了它,使它更简单;只需在hover上更改mlabel类的颜色,并在此基础上设置一个转换。我认为没有必要设置内部分区
.mlabel {
width: 92px;
height: 35px;
background-color: black;
-webkit-transition: background-color 1s;
}
.mlabel:hover {
background-color: red;
}
(仅适用于webkit)我使用的是Chrome 26,但这并不能解决问题。事实上,它看起来比原来的更糟糕。我用的是Chrome 26.0.1410.64 m,它适合我。但我发现我当时使用的是zoom 90%。当我将缩放设置为90%时,它工作,而当缩放设置为100%时,它不工作。很奇怪