Firefox：border-color，border-radius和背景颜色会创建不规则边缘和空白区域 [英] 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中的一个错误。你可以做一个简单的技巧来解决这个问题:(这不是最好的解决方案，我知道，但问题似乎是严重的）

markup ：通过'wrapper'div的伪边界

 < div class =wrapper> 
< div class =box> Hello world< / div> 
< / div> 
  
 
 
 
  css ：padding会执行
  .wrapper {
 border-radius：15px; 
 background：＃333; 
 padding：3px; / *模拟边框* / 
} 
 .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; / *只在ffox * / 
} 
  
  http://jsfiddle.net/steweb/Sy2rr/  
 
Take a look at the following HTML and CSS.
.box {
    border-radius: 15px;
    border: #333 solid 3px;
    background: #333;
}




<div class="box">Hello world</div>
It produces this in Firefox:



As you can see, the border and the background of the div leaves a tiny gap which is visible. I need the border because of a hover state with a different background-color. 

How can I overcome this?
解决方案
This is most likely a bug in Firefox. You could do a simple trick to solve this problem: (it's not the best solution, I know, but the problem seems to be serious) 

markup: a fake border through a 'wrapper' div
<div class="wrapper">
    <div class="box">Hello world</div>
</div>
css: padding does the trick
.wrapper {
    border-radius: 15px;
    background: #333;
    padding:3px; /*simulating border*/
}
.box {
    border-radius: 15px;
    background: #333;
}
http://jsfiddle.net/steweb/peYRf/



OR a more elegant way to solve the problems (without add another div) could be adding a shadow on the box of the same background-color to 'fill' that white horrible stuff i.e.
.box {
    border:3px solid #333;
    border-radius: 15px;
    background: #333;
    -moz-box-shadow:0px 0px 1px #333; /* just on ffox */
}
http://jsfiddle.net/steweb/Sy2rr/

                        
这篇关于Firefox：border-color，border-radius和背景颜色会创建不规则边缘和空白区域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！