html - 带有 Facebook 页面插件的 Webkit 中的 Border-Radius Crazy CSS 消失

Question

我今天在开发一个新网站时发现了一个非常奇怪的错误，我真的不知道到底为什么会这样，但我想有人可能知道。

我做了一个固定在页面右上角的导航菜单，里面有一个很大的 div，由很多 border-radius 组成。

在我向右侧栏添加一个 facebook 页面插件之前，它工作得非常好和正常。
当该 div 的底部越过插件中页面的标题时，border-radius 就会消失。它在那里时保持方形 div，如果我滚动页面并保持圆形直到它“接触”该页面插件的特定部分，它会返回圆形。

我真的不知道为什么，这里有一些代码可以更好地理解:

.nav {
    position:fixed;
    width:100%;
    text-align:right;
    z-index:9999;
}
.face {
    position:absolute;
    width: 20%; 
    background:#F93;
    top:5px;
    right:10px;
    border-radius:9999px;
    overflow:hidden;
}

.face:before {
    content: "";
    display: block;
    padding-top: 95%;

}
.face a img {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%
}
.menu{
    display:inline-block;
    background:#FFF;
    padding:1em;
    width:50%;
    text-align:left;
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    margin-top:3%;

}

.menu a {
    padding:0 0.5em;
    border-radius:4em;
}

还有:

<div class="nav">
<div class="menu">
<a href="#">menu</a><a href="#">menu</a><a href="#">menu</a><a href="#">menu</a>
</div><br/>
<div class="name">
<h2>name</h2>
</div>
<div class="face">
<a href="#"><img src="i/image.png"/></a>
</div>
</div>

顺便说一下，它似乎只发生在 webkit 浏览器上，在 firefox 上它看起来很正常，甚至没有在 internet explorer 中测试。

编辑:刚刚在 Internet Explorer 上测试，令人惊讶的是它运行得非常好，这现在非常非常奇怪

EDIT2:一些截图以进一步说明:

在触摸标题之前:

在它到达那个非常特定的位置之后:

再往下:

任何时候超过标题都不是圆的，其他地方没问题。

EDIT3:我发现错误发生在另一个地方；我在页面上有一个 jquery slider ；我在某些控件上悬停时有不透明度效果，当这些不透明度被动画化时，它再现了消失的边界半径问题，然后自行恢复正常；从中性状态中删除不透明度 CSS 规则使错误在悬停 slider 时停止发生，但当该 div 在 facebook 插件上时它会继续发生

Answer 1

这里可能因为 Facebook 插件的缘故发生了更多的事情，但听起来这是一个没有考虑到 Webkit CSS 规则的问题。如果这是问题所在，我很惊讶 Firefox 没有给您带来麻烦。在跨浏览器支持下设置圆 Angular 样式的标准方法是提供 border-radius，然后是 -moz-border-radius 和 -webkit-border-radius :

.menu {
    ...
    border-radius: 100px 0px 0px 100px;
    -moz-border-radius: 100px 0px 0px 100px;
    -webkit-border-radius: 100px 0px 0px 100px;
    ...
}
.menu a {
    ...
    border-radius: 4em;
    -moz-border-radius: 4em;
    -webkit-border-radius: 4em;
}