不一致的边框半径结果

在Safari和Chrome中获得一致的边框半径结果时出现问题。 Firefox很好。不一致的边框半径结果

下不会产生在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 ，在所有浏览器上工作...很困惑。我查看了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

}

这里给DEV网站的链接：http://www.plasticmonument.com/biomechaniks/index.html

来源

2012-10-11 Justin Meyers

首先，你缺少分号在你的一些css规则的末尾，根据它们的位置，这些可能或不可能工作。例如，你的CSS溢出和不透明度规则缺少分号。其次，chrome支持前缀无边界based on this fiddle I made。这意味着你不需要输入webkit前缀，因为它们只是浪费了代码中的空间，并且扩大了整个css文件的大小。

来源

2012-10-12 02:17:11

最后一次声明不需要使用分号:) –

让Justin适合使用它，这可能是某些浏览器和未来的问题。 –

你能分享文档吗？每个W3C示例都省略了最后一个分号。只需要开始一个新的声明。如果这是你的最后一个，那没关系。单个声明选择器遍布W3C，它们都没有分号。更不用说，添加它们似乎并不能解决我的问题。 –

这是因为您如何在网站上使用这些飞行图像，将边框应用于图像而不是div，它会以您希望的方式应用。

来源

2012-10-12 02:31:03 xception

为什么它在Firefox中工作呢？ –

不一致的边框半径结果

回答

相关问题