Alright, well I have searched and searched on google, *, other sites for an issue regarding how webkit handles the combination of border-radius, border width and color applied to a box, with one side having both a thicker border and different border-color.
好吧，我在google，*，其他网站上搜索和搜索了一个关于webkit如何处理应用于框的边框半径，边框宽度和颜色组合的问题，一边有一个更厚的边框和不同的边框 - 颜色。
I have been testing and testing both in the project I'm currently working on and in JSfiddle.
我一直在我正在进行的项目和JSfiddle中测试和测试。
I have created a JSfiddle with multiple test cases in it exemplifying what styles do and do not affect this bug. http://jsfiddle.net/kGST9/4/
我创建了一个包含多个测试用例的JSfiddle，它举例说明了哪些样式可以做什么，不会影响这个bug。 http://jsfiddle.net/kGST9/4/
You will see that most of the boxes have a strip of red in the centers of the top and bottom borders. You'll also notice that on the different test cases the width of the strip of red varies depending from what I've found, on the width of the left border and the width of the box. I believe it truly doesn't matter what side the thicker border is on and will behave the same. This only occurs in webkit, both the latest releases of Safari 5 and Chrome 16, and I'm assuming this goes to all versions of webkit that supports border radius.
您将看到大多数盒子在顶部和底部边框的中心有一条红色条带。您还会注意到，在不同的测试用例中，红色条带的宽度取决于我发现的宽度，左边框的宽度和盒子的宽度。我相信更厚的边框在哪一侧并且表现相同并不重要。这只发生在webkit中，包括Safari 5和Chrome 16的最新版本，我假设这适用于支持边界半径的所有webkit版本。
Firefox does not display this issue.
Firefox不会显示此问题。
I have not even been able to find anyone talking about this bug in a forum or blogpost, and do not believe to be the only to have this problem. lol
我甚至都没有找到任何人在论坛或博客中找到这个bug，并且不相信是唯一有这个问题的人。大声笑
Just for reference, I've also attempted adding other none border related styles, such as position, display, overflow, background-clip, and their various values, with none of them helping.
仅供参考，我还尝试添加其他无边框相关的样式，例如位置，显示，溢出，背景剪辑及其各种值，但没有任何帮助。
So help me get down to the bottom of this if you will.
如果你愿意的话，帮助我深入了解这个问题。
Regards,
CSSDevMonkey
问候，CSSDevMonkey
2 个解决方案
#1
0
Very strange indeed. I've found after toying with it that whether or not the bug shows up (and how severe it is) is tied to a combination of the ratio of the box's overall width and height as well as the size of the border radius. I can get the problem to go away (in all but one case) by increasing the border radius to 20px. Also, reducing the width of every div to 200px seems to fix the issue.
确实很奇怪。在玩弄它后，我发现这个虫子是否出现（以及它有多严重）与盒子整体宽度和高度的比例以及边缘半径的大小有关。我可以通过将边界半径增加到20px来解决问题（除了一种情况外）。此外，将每个div的宽度减小到200px似乎解决了这个问题。
Definitely looks like a bug. Not sure what a direct fix would be other than playing with varying width/height ratios, border-radii, or border widths. You've probably already done a good amount of this.
绝对看起来像一个bug。除了使用不同的宽高比，边框半径或边框宽度之外，还不确定是什么直接修复。你可能已经完成了很多这方面的工作。
#2
0
I just stumbled across this post and have a similar bug with border radius and different width to height ratios of the divs. I'm not using different sized borders, but different colors.
我只是偶然发现了这个帖子，并且有一个类似的边界半径和不同宽度与高度比的错误。我没有使用不同大小的边框，而是使用不同的颜色。
If I have a border radius and border-color: red blue blue red, the left border gets a strip of blue in it depending on the size. Only in Web-Kit browsers it seems, and I cant seem to find any work around. I guess its a bug, unless you have found a solution.
如果我有一个边框半径和边框颜色：红色蓝色蓝色红色，左边框会根据大小获得一条蓝色条纹。它似乎只在Web-Kit浏览器中，我似乎无法找到任何解决方法。我想这是一个错误，除非你找到了解决方案。
Put up my own jsfiddle with my issue.
http://jsfiddle.net/6xUNr/
用我的问题提出我自己的问题。 http://jsfiddle.net/6xUNr/
#1
0
Very strange indeed. I've found after toying with it that whether or not the bug shows up (and how severe it is) is tied to a combination of the ratio of the box's overall width and height as well as the size of the border radius. I can get the problem to go away (in all but one case) by increasing the border radius to 20px. Also, reducing the width of every div to 200px seems to fix the issue.
确实很奇怪。在玩弄它后，我发现这个虫子是否出现（以及它有多严重）与盒子整体宽度和高度的比例以及边缘半径的大小有关。我可以通过将边界半径增加到20px来解决问题（除了一种情况外）。此外，将每个div的宽度减小到200px似乎解决了这个问题。
Definitely looks like a bug. Not sure what a direct fix would be other than playing with varying width/height ratios, border-radii, or border widths. You've probably already done a good amount of this.
绝对看起来像一个bug。除了使用不同的宽高比，边框半径或边框宽度之外，还不确定是什么直接修复。你可能已经完成了很多这方面的工作。
#2
0
I just stumbled across this post and have a similar bug with border radius and different width to height ratios of the divs. I'm not using different sized borders, but different colors.
我只是偶然发现了这个帖子，并且有一个类似的边界半径和不同宽度与高度比的错误。我没有使用不同大小的边框，而是使用不同的颜色。
If I have a border radius and border-color: red blue blue red, the left border gets a strip of blue in it depending on the size. Only in Web-Kit browsers it seems, and I cant seem to find any work around. I guess its a bug, unless you have found a solution.
如果我有一个边框半径和边框颜色：红色蓝色蓝色红色，左边框会根据大小获得一条蓝色条纹。它似乎只在Web-Kit浏览器中，我似乎无法找到任何解决方法。我想这是一个错误，除非你找到了解决方案。
Put up my own jsfiddle with my issue.
http://jsfiddle.net/6xUNr/
用我的问题提出我自己的问题。 http://jsfiddle.net/6xUNr/