0

背景を適用した「gradient_back」としてクラスを持つ div があります。div は chrome と mozilla で問題ないように見えます。しかし、ie8 では、必要に応じて展開されません。

クラス「gradient_back」は次のとおりです。

.gradient_back{
   width:100%;
   float:left;        
   background:url(images/gradient.gif) repeat-x 0 0;      
   background-size:auto 100%;
 }

ie8 でのこの奇妙な動作を理解していません。問題の解決を手伝ってください。

4

3 に答える 3

1

background-sizeIE8 は CSS機能をサポートしていません。したがって、あなたのbackground-size:auto 100%意志は何の効果もありません。スケーリングは行われず、背景はボックスを埋めるために引き伸ばされることなく IE8 に表示されます。

いくつかの選択肢があります:

  1. 背景グラフィックのサイズを手動で変更して、CSS で拡大縮小しなくても正しいサイズになるようにします。

  2. CSS3Pie にbackground-sizeあるものなど、 にポリフィルを使用します。

  3. ブラウザが をサポートしているかどうかを検出するには、機能の検出(または必要に応じてブラウザの検出) を使用し、サポートしてbackground-sizeいない場合は代替画像を提供するか、無地の単色を提供します。

  4. CSS グラデーションなどの代替機能を使用します。これも IE8 ではサポートされていませんが、ここでもポリフィルを使用できます (これも CSS3Pie でカバーされています)。

于 2013-04-29T08:55:49.503 に答える
1 
I think so, you should change some html like this.

<style type="text/css">
.top-gradient{
    width:100%;
    float:left;        
    background:url(images/top-gradient.gif) repeat-x 0 top;  
}
.bottom-gradient{
    width:100%;
    float:left;        
    background:url(images/bottom-gradient.gif) repeat-x 0 bottom;  
}
</style>

<div class="top-gradient">
    <div class="bottom-gradient">Your page content will go here</div>
</div>
于 2013-04-29T07:08:03.673 に答える