0

こんにちは、次の問題があります。すべてのブラウザを使用すると、背景が正常に表示されます。IE6,7 または互換表示を使用している場合、背景画像が表示されません。すべての「背景画像」を削除してフォールバックを残すだけで、すべてが機能します。助けてください。CSS
は次のとおりです。

html,body{
     background: #529BCE;
     background-image: url('Img/bg.png'); /* fallback */
     background-image: url('Img/bg.png'), -webkit-gradient(linear, left top, left bottom, from(#1D3A62), to(#57A3D5)); /* Saf4+, Chrome */
     background-image: url('Img/bg.png'), -webkit-linear-gradient(top, #1D3A62, #57A3D5); /* Chrome 10+, Saf5.1+ */
     background-image: url('Img/bg.png'), -moz-linear-gradient(top, #1D3A62, #57A3D5); /* FF3.6+ */
     background-image: url('Img/bg.png'), -ms-linear-gradient(top, #1D3A62, #57A3D5); /* IE10 */
     background-image: url('Img/bg.png'), -o-linear-gradient(top, #1D3A62, #57A3D5); /* Opera 11.10+ */
     background-image: url('Img/bg.png'), linear-gradient(top, #1D3A62, #57A3D5); /* W3C */
     background-repeat: no-repeat;
     color:#18364B;
     font-family: Arial,Verdana,Geneva,Helvetica,sans-serif;
     font-size:20px;
     line-height:1.2em;
     margin:0;padding:0;
     height: 100%;
     overflow: auto;
    }
4

4 に答える 4

1

ie6 と ie7 の background-image を再宣言してみてください。cssファイルの後に次を追加します。


<!--[if IE 6]><style>html,body{background:#529bce url("../Img/bg.png") 0 0 no-repeat}</style>
<![endif]-->
<!--[if IE 7]><style>html,body{background:#529bce url("../Img/bg.png") 0 0 no-repeat}</style>
<![endif]-->

これでうまくいくはずですが、IE6 で png が表示されない場合は、png がサポートされていないためです。それでも問題が解決しない場合は、それぞれのスタイルを変更して、何をターゲットにしているのかを把握し、そこから進んでください。

于 2012-08-22T10:37:14.907 に答える
0

これが編集したcssです。これを試して

 html,body
    {
       background-color: #57A3D5;
    background-color: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1D3A62), to(#57A3D5));
    background-color: -moz-linear-gradient(top, #1D3A62 0%, #57A3D5 100%);
    background-image: url('../Img/bg.png'); /* fallback */ 
    background-repeat: no-repeat;
    color:#18364B;
    font-family: Arial,Verdana,Geneva,Helvetica,sans-serif;
    font-size:20px;
    line-height:1.2em;
    margin:0;padding:0;
    height: 100%;
    overflow: auto;

    }
于 2012-08-22T10:25:25.717 に答える
0

これを試して;

<!--[if IE 6]><style type="text/css">html,body{background-color: #529bce; background-image: url('../Img/bg.png'); background-repeat: no-repeat}</style>
<![endif]-->
<!--[if IE 7]><style type="text/css">html,body{background-color: #529bce; background-image: url('../Img/bg.png'); background-repeat: no-repeat}</style>
<![endif]-->
于 2012-08-22T10:47:12.347 に答える
0

これは、古いバージョンの IE を混乱させる複数の背景画像構文を使用しているためです。だからこれの代わりに

 background-image: url('Img/bg.png'); /* fallback */
 background-image: url('Img/bg.png'), -webkit-gradient(linear, left top, left bottom, from(#1D3A62), to(#57A3D5)); /* Saf4+, Chrome */
 /* etc */

url()次のように、グラデーションを使用して背景画像からセクションを削除する必要があります。

 background-image: url('Img/bg.png'); /* fallback */
 background-image: -webkit-gradient(linear, left top, left bottom, from(#1D3A62), to(#57A3D5)); /* Saf4+, Chrome */
 background-image: -webkit-linear-gradient(top, #1D3A62, #57A3D5); /* Chrome 10+, Saf5.1+ */
 background-image:    -moz-linear-gradient(top, #1D3A62, #57A3D5); /* FF3.6+ */
 background-image:     -ms-linear-gradient(top, #1D3A62, #57A3D5); /* IE10 */
 background-image:      -o-linear-gradient(top, #1D3A62, #57A3D5); /* Opera 11.10+ */
 background-image:         linear-gradient(top, #1D3A62, #57A3D5); /* W3C */

新しいブラウザーにグラデーションと url('Img/bg.png')が必要な場合は、特に古いバージョンの IE をターゲットにする方法を見つける必要があります。私は条件付きクラス メソッドを好みます。

于 2012-08-22T11:00:07.600 に答える