CSS3边框半径单独设置一个边框颜色导致颜色渗出。

Question

我有一个流动宽度的div，使用border-radius来实现圆角，并且在div的一侧有一个不同颜色的大边框。

当浏览器窗口足够小时，所有边框都表现正常。然而，当我放大窗口大小时，我开始看到颜色渗透到我的div中心。

我想知道可能的解决方案，是否有任何想法？

类具有两个属性：

• border:1px solid #CCC; margin-bottom:15px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; background:#F3F3F3;
• border-left:7px solid #EF831B;

似乎div的高度也在某种程度上影响了它。

屏幕截图：

- johncho

---

浏览器窗口。哪个浏览器？ - BoltClock

你在其他浏览器中有没有观察到这个问题？ - BoltClock

刚刚测试了一下，似乎只在Webkit中发生了这种情况 =( - johncho

Answer 1

哎呀，看起来你发现了一个WebKit的bug。很恶劣。

我能想到的最好解决办法是在.seller-msg内添加一个额外的<div>（哇，感觉像是IE6重现了），并将细灰色边框放在那个<div>上。

• http://jsfiddle.net/9a3Gp/3/

希望有人能想出更好的东西。

---

如果您想向WebKit团队报告错误，详细的流程在这里：

• http://www.webkit.org/quality/reporting.html

我已经下载了最新的夜间构建版（在撰写本文时是Mac OS X上的r106067版本），并且该错误也存在于其中：

• http://jsfiddle.net/9a3Gp/

我还进行了“border-radius color”关键词的Bugzilla搜索，但没有找到与此相匹配的错误。

• https://bugs.webkit.org/buglist.cgi?query_format=specific&order=relevance+desc&bug_status=__open__&product=WebKit&content=border-radius+color

- Paul D. Waite

---

谢谢你的帮助，我也考虑过多余的<div>，但似乎应该有更好的解决方案。 - johncho

当然，也许会有其他人想出一个。 - Paul D. Waite