2

在 Safari 和 Chrome 中获得一致的边框半径时出现问题。火狐没问题。

以下不会在 Safari 或 Chrome 中产生任何边框半径：

.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
overflow: hidden

}

具有讽刺意味的是，只需在我的 DOM 中的其他项目上使用没有 -moz 或 -webkit 的“border-radius”，就可以在所有浏览器上工作......太困惑了。我查看了 Stackoverflow 上的其他一些帖子，并阅读了以前版本的 Safari 中的一个错误，但我的是最新版本，并且还在 Chrome 上产生了问题。

这是适用于所有浏览器的其他边框半径代码：

.hero-cta:before, .nav-wrapper:before, .nav-wrapper:after, #feature-slider:after {
position: absolute;
content: "";
border-radius: 100px;
box-shadow: rgba(212,212,212,100) 550px 50px 150px;
width: 420px;
height: 300px;
opacity: .8

}

这是开发网站的链接：http ://www.plasticmonument.com/biomechaniks/index.html

4

2 回答 2

0

那是因为您如何在网站上使用这些飞行图像，将边框应用于图像而不是 div，这将是您想要的方式。

于 2012-10-12T02:31:03.173 回答
0

首先，您在某些 css 规则的末尾缺少分号，因此这些规则可能会或可能不会起作用，具体取决于它们的位置。例如，您的 css 溢出和不透明度规则缺少分号。其次，基于我制作的这个小提琴，chrome 支持无前缀边框半径。这意味着您不需要键入 webkit 前缀，因为它们只会浪费代码中的空间并使整个 css 文件变大。

于 2012-10-12T02:17:11.720 回答