CSS3 Border-Radius的一个边框的颜色不同，正在渗色 [英] CSS3 Border-Radius with one border colored differently is bleeding its color

问题描述

我有一个流体宽度div，它使用border-radius带有圆角，以及div一侧的大边框颜色不同.

当浏览器窗口足够小时，所有边框都将按应有的方式运行.但是，当我扩大窗口大小时，我开始在div的中心看到颜色渗出.

我想知道是否有人想到了可能的解决方案.

---

div有两个类:

.info-box (边界:{px:1px实心#CCC;底边距:15px; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px;背景:#F3F3F3;}

.seller-msg {border-left:7px solid#EF831B;}

---

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

屏幕截图

解决方案

Crikey，看来您已经找到了WebKit错误.讨厌的人.

一种解决方法，我能想到的最好的方法是在.seller-msg内添加一个额外的<div>(这又像是IE6)，然后在该<div>上放一个细的灰色边框./p>

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

希望有人能提出更好的建议.

---

如果您想向WebKit团队报告该错误，请在此处详细说明该过程:

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

我下载了最新的夜间版本(在撰写本文时，在Mac OS X上为r106067)，并且该错误也存在:

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

我也在Bugzilla中搜索了边界半径颜色"，但找不到与之匹配的任何bug.

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

I have a fluid-width div with rounded corners using the border-radius, as well as a large border on one-side of the div colored differently.

When the browser window is small enough, the borders all behave as it should. However, when I enlarge the window size, I start to see the color bleed through in the center of my div.

I was wondering if anyone had an idea of a possible solution could be.

---

The div has two classes:

.info-box {border: 1px solid #CCC; margin-bottom: 15px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; background: #F3F3F3;}

.seller-msg {border-left: 7px solid #EF831B;}

---

It seems like the height of the div is also affecting it as well somehow.

Screenshot

解决方案

Crikey, looks like you’ve found a WebKit bug. Nasty one.

The best I can come up with for a workaround is to add an extra <div> (whee, it’s like IE6 all over again) inside .seller-msg, and put the thin grey border on that <div> instead.

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

Hopefully someone can come up with something better.

---

If you wanted to report the bug to the WebKit team, the procedure is detailed here:

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

I’ve downloaded the latest nightly build (r106067 on Mac OS X at time of writing), and the bug is present there too:

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

I’ve also done a Bugzilla search for "border-radius color", and I can’t see any bugs that match this one.

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

这篇关于CSS3 Border-Radius的一个边框的颜色不同，正在渗色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！