0

Web サイトを作成していて、Internet Explorer (ver. 8 でテスト済み) で背景画像が表示されないという問題が発生しました。

これは私のコードです:

    body {
      background: rgb(255,255,255); /* Old browsers */
      background-image: url(../images/bg.png);
      background-image: url(../images/bg.png), -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(105,205,249,1) 100%); /* FF3.6+ */
      background-image: url(../images/bg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(105,205,249,1))); /* Chrome,Safari4+ */
      background-image: url(../images/bg.png), -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Chrome10+,Safari5.1+ */
      background-image: url(../images/bg.png), -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Opera 11.10+ */
      background-image: url(../images/bg.png), -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* IE10+ */
      background-image: url(../images/bg.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* W3C */
      background-repeat: no-repeat;
      background-position: 0 0;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 15px;
}

この問題に対処する方法はありますか?

4

2 に答える 2

1

例については、このフィドルを確認してください。あなたがこのように望んでいるかどうかはわかりません。しかし、IEでも動作します。チェックしてください。例

 body {
      background: rgb(255,255,255); /* Old browsers */
      background-image: url(../images/bg.png);
      background-image: url(../images/bg.png), -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(105,205,249,1) 100%); /* FF3.6+ */
      background-image: url(../images/bg.png), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(105,205,249,1))); /* Chrome,Safari4+ */
      background-image: url(../images/bg.png), -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Chrome10+,Safari5.1+ */
      background-image: url(../images/bg.png), -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* Opera 11.10+ */
      background-image: url(../images/bg.png), -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* IE10+ */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#6BCEF9')"; /* IE8 */
      background-image: url(../images/bg.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(105,205,249,1) 100%); /* W3C */
      background-repeat: no-repeat;
      background-position: 0 0;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 15px;
}

ここで、次の行を追加しました。

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFFFFF', endColorstr='#6BCEF9')"; /* IE8 */

確認してお知らせください。ありがとう

于 2012-11-09T16:35:18.267 に答える
0

私はこれを見つけました http://social.msdn.microsoft.com/Forums/en-ZA/iewebdevelopment/thread/4771f218-42fc-43b0-b0fd-bda98eef12ad

JS宣言と競合するIE8の背景画像について説明しています。それがここでの問題かどうかはわかりません。ここでhasLayoutの問題が発生することはないはずですが、display：blockを配置してみてください。体に。また、ボディがその中のコンテンツに合わせてサイズ設定されていることを確認する必要があります（つまり、フロートがクリアされていることなどを確認してください。ただし、ほとんどのクライアントでbgsが失敗した場合にのみ、これが原因である可能性があります）。

私は境界線を付けるのが好きです：1pxの赤一色。私が何かを配置またはデバッグしようとしているものの周り。それがいくつかの助けになることを願っています、申し訳ありませんが答えはより完全ではありません。

また、これをテストする別の方法は、cssインクルードの後に​​IE条件ステートメントを追加し、そこから再生することです。

于 2012-11-09T16:40:18.380 に答える