[英]Firefox: border-color, border-radius and background color creates ragged edges and white space
看看下面的 HTML 和 CSS。
.box {
border-radius: 15px;
border: #333 solid 3px;
background: #333;
}
<div class="box">Hello world</div>
它在 Firefox 中生成:
如您所见,div 的边框和背景留下了一个可见的微小间隙。 由于具有不同背景颜色的悬停状态,我需要边框。
我怎样才能克服这个问题?
这很可能是Firefox中的一个错误。 你可以做一个简单的技巧来解决这个问题:(这不是最好的解决方案,我知道,但问题似乎很严重)
标记 :通过'包装'div的假边框
<div class="wrapper">
<div class="box">Hello world</div>
</div>
css :padding可以解决问题
.wrapper {
border-radius: 15px;
background: #333;
padding:3px; /*simulating border*/
}
.box {
border-radius: 15px;
background: #333;
}
http://jsfiddle.net/steweb/peYRf/
或者更优雅的方式来解决问题(不添加另一个div)可以在相同背景颜色的框上添加阴影来“填充”那些白色可怕的东西,即
.box {
border:3px solid #333;
border-radius: 15px;
background: #333;
-moz-box-shadow:0px 0px 1px #333; /* just on ffox */
}
我今天遇到了同样的问题,在我的案例中也是 Firefox 独有的(原因与 2011 年的渲染问题不同),但答案应该仍然与今天在这里结束的其他人相关。
我的问题是我有两个元素,一个父母和一个孩子。 我将它们都设置为border-radius: 8px
期待一个完美的圆角,但我最终得到了与问题中发现的相似的新月间隙。
在我的情况下,解决方案是将孩子的border-radius
设置为略小于父母的. 运行下面的代码查看问题和解决方案:
.container { border: 3px solid black; border-radius: 8px; margin-bottom: 1em; text-align: center; } .inner { height: 50px; background-color: hotpink; } .inner.same { border-radius: 8px; } .inner.none { border-radius: 0px; } .inner.smaller { border-radius: 5px; }
<div class="container"> <div class="inner same">Same border radius</div> </div> <div class="container"> <div class="inner none">No border radius</div> </div> <div class="container"> <div class="inner smaller">Slightly smaller border radius</div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.