在Webkit中出现border-radius和一个较粗的边框问题

Question

好吧，我在谷歌，stackoverflow，其他网站上搜索和搜索了一个关于webkit如何处理应用于框的边框半径，边框宽度和颜色组合的问题，一边有一个更厚的边框和不同的边框颜色。

我一直在我正在进行的项目和JSfiddle中测试和测试。

我已经创建了一个包含多个测试用例的JSfiddle，它举例说明了哪些样式可以做什么，不会影响这个bug。 http://jsfiddle.net/kGST9/4/

您会看到大多数盒子在顶部和底部边框的中心都有一条红色条纹。你还会注意到，在不同的测试用例中，红色条带的宽度取决于我发现的，左边框的宽度和盒子的宽度。我相信更厚的边框在哪一侧并且行为相同并不重要。这只发生在webkit中，包括Safari 5和Chrome 16的最新版本，我假设这适用于支持边界半径的所有webkit版本。

Firefox不会显示此问题。

我甚至没能在论坛或博客中找到任何人谈论这个错误，并且不相信是唯一有这个问题的人。大声笑

仅供参考，我还尝试添加其他无边框相关的样式，例如位置，显示，溢出，背景剪辑及其各种值，但没有任何帮助。

如果愿意的话，请帮助我深究这一点。

的问候，
CSSDevMonkey

Answer 1

确实非常奇怪。我发现玩弄了它之后，它是否显示出错误（以及它有多严重）与盒子的整体宽度和高度的比例以及边缘半径的大小相关联。通过将边界半径增加到20px，我可以解决问题（除了一种情况外）。此外，将每个div的宽度减小到200px似乎可以解决问题。

绝对看起来像个bug。除了使用不同的宽度/高度比，边框半径或边框宽度之外，还不确定是什么直接修复。你可能已经做了很多这个。

Answer 2

我偶然发现了这个帖子，并且有一个类似的错误，边界半径和div的宽高比不同。我不是使用不同大小的边框，而是使用不同的颜色。

如果我有边框半径和边框颜色：红色蓝色蓝色红色，左边框会根据尺寸获得一条蓝色条纹。它似乎只在Web-Kit浏览器中，我似乎无法找到任何解决方法。我想这是一个错误，除非你找到了解决方案。

用我的问题提出自己的问题 http://jsfiddle.net/6xUNr/