firefox - 边界半径；溢出 : hidden, 并且文本未被剪裁

Question

我在圆形 div 中做一些风格化的文本，其中的文本正好凸起到容器的顶部。我已经能够控制几乎所有的内容、嵌套的 div、设置为背景的图像等，并且都成功地剪辑了它们，但是这个一直让我很伤心。

使用老式图像边框或遮盖不是解决方案，因为我们有动态图形背景。我们需要一个解决方案来实际上剪辑文本。

这在 Firefox 3.x 和旧版本的 Chrome 中最为明显

下面是示例代码:

http://jsfiddle.net/vfp3v/1/

div {
    -moz-border-radius: 45px;
    border-radius: 45px;
    background-color: #ccc;
    font-size: 100px;
    color: #777;
    line-height: 70%;
    overflow: hidden;
    width: 257px;
}

卡顿:

请注意，它已在新的 Chrome 和 FireFox 4 中得到修复 - 水:

我们网站的大多数用户都是 Firefox 3.6，因此也希望能够为他们提供一个优雅的解决方案。任何帮助表示赞赏!干杯

Answer 1

这个在 FF 3.6 中有效:http://jsfiddle.net/vfp3v/15/

它有一些缺点，正如您在第二个示例(在 FF 3.6 中)中看到的那样，剪掉的边框具有纯色，因此如果您使用某种背景，这可能看起来很难看。看看它，它可能适合您的需求。

我刚刚添加了一个跨度:

<div><span></span>WXYZ</div>

然后将其放置在文本上，边框颜色与背景颜色相同，位移与边框一样大:

div{
    position:relative;
    etc...
}
span{ 
    position:absolute; display:block; width:100%; height:100%;
    border:25px solid #fff; top:-25px; left:-25px;
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */       
}

编辑:刚刚在 chrome 10.0.6(有剪辑错误)中测试了这个并且它有效!

在正确支持 border-radius 的浏览器中，span(和它的 border-color)甚至不可见，因为它被剪掉了(溢出:隐藏)。