Firefox中的圆角：边框和背景之间的空间

<div>&nbsp;</div>

div { 
    margin: 20px; 
    width: 250px; 
    height: 250px; 
    -moz-border-radius: 15px; 
    -webkit-border-radius: 15px; 
    -khtml-border-radius: 15px; 
    border-radius: 15px; 
    background-color: #4c66a1; 
    border: 2px solid #4c66a1; 
}

我也有适用于这个div边框和背景颜色。这个问题出现在Firefox中。边框和div的背景颜色之间有少量空白（请参阅下图）。这是非常小的，但人们已经注意到它。它看起来像角落里的灯光效果。

这是一个在Firefox中带圆角的已知问题吗？ IE，Chrome和Opera都很好。

供参考/为了说明问题，我已经使边框和背景颜色相同，即使它是多余的。它使得空白更突出。

 Firefox  Chrome/IE/Opera

enter image description here

来源

2012-03-06 Matt K

它没有重现当我改变颜色为红色 – FosterZ 2012-03-06 17:21:49

@FosterZ：红色仍然适合我。不太明显。将曲线半径最大为50，你会看到它，只是。编辑：实际上，我仍然可以在15岁看到它，鹰眼睛;） – musefan 2012-03-06 17:22:58

是的，这就是为什么我在样本中使用类似的颜色来更好地说明问题。明亮的颜色会让你的眼睛远离它，这个问题不太明显。如果你真的想看到它发生，尝试使用边界半径创建一个圆。空白将包围整个div。 – 2012-03-06 17:26:53

有趣的是，如果我们将其更改为点缀，白色的消失：

div { 
    margin: 20px; 
    width: 250px; 
    height: 250px; 
    -moz-border-radius: 30px; 
    -webkit-border-radius: 30px; 
    -khtml-border-radius: 30px; 
    border-radius: 30px; 
    background-color: #4c66a1; 
    border: 2px dotted #4c66a1; 
}

http://jsfiddle.net/5yAkZ/23/

编辑了无效的CSS以前

来源

2012-03-06 18:03:53 Chris

这是无效的CSS。你必须指定一个样式，否则边框将不会显示。 – 2012-03-06 18:07:01

你是对的，我的是无效的。但是，如果我们将其更改为虚线，则问题似乎消失（至少在我的结尾） - 就像具有圆形实心边框的错误。 – Chris 2012-03-06 18:18:23

哇，真的很好赶上！从这个我做了一些试验，发现如果你使用'double'风格......问题就解决了！由于我的边框只有'2px'，所以你实际上无法检测到双边框，只有在大于3px的位置才会分割成2个不同的边框。非常感谢您的帮助！这应该在某个地方的错误报告中提交... – 2012-03-06 18:27:51

检查了这一点这是你想要 JsFiddle

<div id='ex1' class='exampleRound'>&nbsp;</div>

#ex1{ 
    border-radius: 50px; 
    height: 200px; 
    width: 200px; 
} 
.exampleRound { 
    background: none repeat scroll 0 0 #4c66a1; 
    border: 5px solid pink; 
    font-size: 20px; 
    font-weight: bold; 
    margin-bottom: 30px; 
    padding: 20px 40px; 
    margin:20px 
}

来源

2012-03-06 17:57:38 FosterZ

将这些鲜艳的颜色切换为柔和色调，问题仍然存在。 – 2012-03-06 18:05:05

:)告诉我的颜色，因为我现在看不到它.. – FosterZ 2012-03-06 18:14:17

见https://bugzilla.mozilla.org/show_bug.cgi?id=704399是固定在Firefox 11和新。

来源

2012-03-07 03:51:00

Firefox中的圆角：边框和背景之间的空间

回答

相关问题