小编ioT*_*Tus的帖子

边界半径; 溢出:隐藏,文本不被剪裁

我在圆形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;
}
Run Code Online (Sandbox Code Playgroud)

jank:

在此输入图像描述

请注意,它已在新的Chrome和FireFox 4中修复 - shui:

在此输入图像描述

我们的大多数网站用户都是Firefox 3.6,所以也希望能够为他们提供优雅的解决方案.任何帮助赞赏!干杯

firefox google-chrome clipping css3

10
推荐指数
1
解决办法
4656
查看次数

标签 统计

clipping ×1

css3 ×1

firefox ×1

google-chrome ×1