http://jsfiddle.net/eE4Y2/2/
我正在尝试使用css为div创建一个圆角、折叠角的幻觉。
我不明白为什么这个相当简单的html/css在opera(v.12.10)中呈现得很奇怪,但是在chrome和firefox中看起来很好。当我对div应用边界半径时,边界内会出现一个奇怪的缺口,仅在opera上。请参阅上面的jsfiddle以查看示例。
我很想听听关于歌剧在这种情况下发生了什么的修正或至少是一个解释。
<body>
<div class="example"></div>
</body>
body
{
background-color: gray;
padding: 50px;
}
div.example
{
border-bottom-left-radius: 10px;
border-color: transparent transparent white white;
border-style: solid;
border-width: 30px;
display: block;
width: 0;
height: 0;
}
最佳答案
好像是个歌剧迷。因此,您可以通过在故障前放置另一个div来手动修复故障http://jsfiddle.net/aN4XP/
<div class="example">
<div class="operaFix"></div>
</div>
这里是附加的css:
div.operaFix
{
border-bottom-left-radius: 10px;
border-color: white;
border-style: solid;
border-width:10px;
display:block;
margin-left:-30px;
margin-top:10px;
width: 0;
height: 0;
}
其他浏览器不应受到此影响。