10

丸みを帯びた 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 です。そのため、彼らにもエレガントなソリューションを提供できれば幸いです。どんな助けでも大歓迎です！乾杯

4

1 に答える 1

5

これは FF 3.6 で動作します: http://jsfiddle.net/vfp3v/15/

2 番目の例 (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 を正しくサポートするブラウザーでは、スパン (および境界線の色) は切り取られている (overflow:hidden) ため、表示されません。

于 2011-04-16T07:09:07.323 に答える