2011-08-03 7 views
0

私は今、体型にYUIを使用してbackground-colorを変更しようとすると、FF5とOperaでは動作しませんが、IEとChromeでは動作します。しかし、私がbackgroundの色の値を設定すると、Operaと同様にFFでも動作します。私はbackground-colorがちょうどbackgroundのための専門の何らかの種類だと思った。どのブラウザをすべてのブラウザで安全に使用できますか?問題のコードはbackground or background-color? Which one is safe to use?で見ることができますが、YUIがどのようにイベントを処理するかを理解しているにはまだ問題があります。私はまた、変更されたコードhttp://www.kumarchetan.com/yui-module.htmlを持つページをホストしています。IE、Chrome、FF、Operaを使用してこのページにアクセスして、さまざまなブラウザで値がどれだけスムーズに変化するかを確認してください。あなたが別のページの背景色を指定したい場合は、htmlのためにそれを行うようYUI CSS resetは、html要素ではなくbodybackgroundプロパティを設定するため背景または背景色?どちらを安全に使用できますか?

+0

いくつかのコードを表示できますか。背景色はFF5で私にとってうまくいく –

答えて

1

、あなたの問題を解決し、このCSSを追加するには:

html, body { 
    margin: 0; 
    padding: 0; 
    height: 100% 
} 

htmlbodyあなたがmousemoveイベントを処理するために必要なものである100%の高さを、取りません。ルート要素is handled speciallybackgroundですが、これは100%の高さと同じではありません。

ブラウザ間で動作が矛盾する理由は、@ BoltClockの編集と関係している可能性があります。また、doctypeがないため、ページにQuirks Modeが使用されている可能性があります。これを最初の行に追加してください:

<!DOCTYPE html> 
+0

おかげで!私は自分自身を飲み物で扱いますが、あなたも歓迎です:)しかし、なぜChromeは違ったふうに振る舞うでしょうか... – Kumar

+0

あなたはこの解決策をクロスポストできますか?http://stackoverflow.com/questions/6922672/yui3- fire-or-opera-works-fine-in-chromeでも動作しますか?私はその質問も閉じます – Kumar

3

です。 background-colorと略語backgroundとの間の互換性の問題には関係ありません。どちらのプロパティもすべてのブラウザで完全にサポートされています(いずれにせよCSS1バージョン)。

EDIT:あなたはYUIのJavaScript APIを使用していたことを意味しています...その場合、DOMスタイルのプロパティと矛盾しています。実際には、ブラウザ間の互換性のためにcamelCase表記法を使用する必要があります(これはYUIにのみ適用されるのではなく、DOM全体に適用されます)。 IEとChromeはちょうどハイフネーションされたプロパティ名もサポートしています。

+1

It Strikes Again! – thirtydot

+0

@thirtydot:あなたの脚光を盗んで申し訳ありません;) – BoltClock

+0

@BoltClock、私は誰もCSSを使用していません。 YUIを使用したプレーンな古いバニラHTMLページ。ソースを見て、あなたは理解するでしょう。 – Kumar

0

イメージと色を設定していない限り、2つの間に実際の違いはありません。もしあなたがただ一つの事を設定しているのであれば、backgroundを使うこともできます。

0

これらは両方ともすべてのブラウザで安全に使用できます。

backgroundは、それはあなたがいるので、BoltClockの答えに background: #fff url(path/to/image.png) top center fixed;

0

1を書き込むことができます

などbackground-color, background-image, background-positionなどサブ属性などですので、代わりの

background-color: #fff; /* white */ 
background-image: url(path/to/image.png); 
background-repeat: repeat; /* or repeat-x, repeat-y, none */ 
background-position: top center; /* other options include bottom, right, left, along with pixel values and percentages*/ 
background-attachment: scroll; /* or fixed */ 

を設定し、すべてを設定することができますこれはおそらくこのケースでは正しいかもしれませんが、最近私は実際には別の解決策を使って同様の状況を抱えていたので、分かち合うと思いました。

は、私の場合、問題になっている要素は、グラデーションの背景ました:勾配は色よりも優先されましたので、

background: -moz-linear-gradient(top, #c2c2c2, #ffffff); 

background-colorを設定するには、この要素に影響を及ぼしませんでした。私はそれを無効にするためにbackgroundを使用しなければならなかった。