我正在为 firefox 使用 CSS 圆 Angular ，但我在内容边界方面遇到以下问题:
代码
<html>
<head>
<style>
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
}
#inner {
background: red;
opacity: 0.5;
}
</style>
</head>
<body>
<div id="outter">
<div id="inner">text</div>
</div>
</body>
</html>
效果
alt text http://img256.imageshack.us/img256/2108/testew.png
我可以通过为每个 outter 的 child 定义 -moz-border-radius 来避免这个问题。还有其他我想念的方法吗？
编辑
使用多个内部 div 进行更难的测试，每个 div 具有不同的 background-color:
<div id="outter">
<div id="inner1" style="background: blue">text</div>
<div id="inner2" style="background: gray">text</div>
...
<div id="innerN" style="background: yellow">text</div>
</div>
最佳答案
你也可以这样做:
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
background: red;
}
#inner {
opacity: 0.5;
}
将背景移动到圆 Angular 父级将正确呈现，请参见此处的示例:http://jsfiddle.net/mE8En/ (仅适用于 firefox!)如果你想支持其他的，请添加 webkit 边框半径 webkit based browsers同样，像这样:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
编辑更新:要处理 firefox 中的内部 div，减去内部 div 上的像素以补偿边框，结果如下:
#outter {
width: 200px;
margin: auto;
text-align: center;
border: 1px solid #333;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: red;
}
#outter > div:first-child {
-moz-border-radius-topleft: 14px;
-moz-border-radius-topright: 14px;
-webkit-border-top-left-radius: 14px;
-webkit-border-top-right-radius: 14px;
}
#outter > div:last-child {
-moz-border-radius-bottomleft: 14px;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-left-radius: 14px;
-webkit-border-bottom-right-radius: 14px;
}
#inner {
opacity: 0.5;
}
注意:webkit 中内部 div 的半径并不完美，请根据需要进行调整...这是因为浏览器之间的渲染像素不完美。
关于html - 带圆 Angular 的内容边界，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2621553/