-1

jQueryスライダーの丸みを帯びた角はFirefoxでのみ機能します。

Firefox 17.0.1で正しくレンダリングされます（下の画像を参照）

ここに画像の説明を入力してください

Safariバージョン6.0.2（8536.26.17）で正しくレンダリングされない（下の画像を参照）

ここに画像の説明を入力してください

Chromeバージョン23.0.1271.101で正しくレンダリングされない（下の画像を参照） ここに画像の説明を入力してください

jsfiddleビルドは次のとおりです。http：//jsfiddle.net/plasticmonument/TCVH5/1/ （注：スライダー画像にフルパスのURLのみを指定したため、他のすべてが欠落します）

私のHTML：

enter code here

私のCSS：

.hero-wrapper {
position: relative;
z-index: 2;
float: left;
width: 100%;
height: 429px;
border-radius: 10px;
border-top-left-radius: 0;
-webkit-border-radius: 10px;
-webkit-border-top-left-radius: 0;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius: 10px;
-moz-border-top-left-radius: 0;
-o-border-radius: 10px;
-o-border-top-left-radius: 0;
-ms-border-radius: 10px;
-ms-border-top-left-radius: 0;
overflow: hidden
}

#feature-slider ul.slider {
position: absolute;
top: 0;
left: 0;
width: 900000px
}
4

1 に答える 1

0

私の推測では、これは古い「前景画像がクリップされていない」バグだと思います。

一部のブラウザでは、境界線の半径が適用される場合がありますが、境界線の半径を持つ要素の前景画像は、半径によって制限されません。

これは主要なブラウザで扱っていたような印象を受けましたが、しばらく調べていたものではないので、誤解しているかもしれません。それは確かにあなたが見ているもののように見えます。Firefox 3.xの時代にはかなり大きな問題だったのを覚えていますが、正しく思い出せば、FFチームはv4とv8の間のどこかでそれを整理しました。

それを証明するには、要素に実際の境界線（例border:solid black 2px;）を追加して、何が起こるかを確認します。画像の下の角に沿って境界線が消える場合は、これがバグです。

これが問題である場合、解決策は次のとおりです。

  1. 代わりに背景画像を使用してください。これはクリップされません。
  2. マークアップのレイヤーを追加します。たとえば、その中に<div>既存のレイヤーを追加し、の代わりに<img>境界線の半径を配置します。<div><img>
  3. それを無視し、ブラウザベンダーが問題を修正するのを待ちます。
于 2013-01-08T19:51:02.557 に答える