2

Firefox の動作がおかしいです。divの背景には（いつものように）単純な4x4pxの透明PNGを使用します。Chrome、Safari、Opera、さらには IE では見栄えがしますが、FF では「壊れています」。ここに私が話していることを示す写真があります: http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G .

背景に画像とグラデーションを使用していますが、画像のみを使用すると同じ結果になります。

コードは次のとおりです。

#wrap {
  background-color: #f5f5f5;
  background-image: url(../images/general/bg-wrap.png);
  background-image: url(../images/general/bg-wrap.png), -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ebebeb));
  background-image: url(../images/general/bg-wrap.png), -moz-linear-gradient(top, #f5f5f5, #ebebeb);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ebebeb');
  background-position: 0 0; background-repeat: repeat;
}

背景画像のみを使用すると、次のようになります。

#wrap {
   background: #f5f5f5 url(../images/general/bg-wrap) 0 0 repeat;
}

これは bg-wrap.png です: http://cl.ly/0i3i1R0P2R0i1K1h1V1P . 何が起こっているのかわかりません...

4

4 に答える 4

4

Firefox のバグと背景画像タイルのサイズについては誰もが正しいです。16p x 16px のタイルで同じ問題が発生していました。Nealio の答えは正しいようですが、解決の問題ではありません。代わりに、タイルを文字通り複製して水平方向と垂直方向に繰り返すようにし、そのタイルを背景画像として使用します。

たとえば、私の背景画像は、グレーと白の正方形が交互に並んだ非常に小さな「チェッカーボード」の単純なタイルです。最初の画像は、パターンを無限に並べるための最低限の画像でした。そのため、各「チェッカー」は 8px x 8px で、背景画像は 16px x 16px になりました。これは、Firefoxを除いてどこでも問題なく表示されます。Firefox では、あなたと同じジグザグ ジャギー レンダリングが表示されます。

Nealio の回答を読んだ後、最初のパターン タイルを 2 倍にして、4 チェッカー x 4 チェッカー (8px X 4 = 32) にしました。

そして出来上がり！背景の外観は同じですが、タイルが少し大きくなっています。

于 2012-11-17T01:09:54.760 に答える
3

私が考えることができる唯一のことは、数年前、Firefoxの初期のバージョンでは小さすぎる（約16x16未満）背景画像を繰り返すのに問題があったということです。

おそらくこれは、グラデーション塗りつぶしcssと組み合わせると、そのバグの新しい化身です。

より大きな背景画像でテストして、これを除外するだけです。

于 2012-05-16T11:42:37.870 に答える
1

それは変です...

フィドルをセットアップすると、次のように正常に動作します: http://jsfiddle.net/will/KMVvT/

他の何かが干渉している可能性があると思いますか？

于 2012-05-16T11:37:39.040 に答える
0

mozillaとwebkitの機能は、閉じ括弧の後にコンマで区切ってはいけません。また、画像パスは引用符で囲む必要があります。

画像が表示されないという問題がありましたが、FireBugで表示できました。その理由は、adblockplus拡張機能でした。そのページ（または一般）を無効にすると、再び表示されました。

于 2012-11-09T13:04:24.603 に答える