0

私は次のデザインを持っており、2 つ<div>の間にイメージがあります。私の目的は、2 つの div の間に画像を保持することです。

この例では、メイン画像 (400x200) を緑色の画像 ( #firstLayer) とグレー (本体の背景) の間に配置します。私のソリューションは Firefox 16、Safari、および Chrome ではうまく機能しますが、IE では機能しません。IE では、画像は の上に表示され#firstLayerます。

ここに問題のJFiddleがあります

クイックビュー用のhtmlとcssは次のとおりです。

HTML:

<body>
<div id="firstLayer">
  <img id="image" class="center" src="http://lorempixel.com/400/200/" >
         <div id="mainContent">
          main page content
         </div>
  </div>
</body>

CSS:

body{
 background:gray;  
}
#firstLayer{
    background: url("http://www.enough.de/fileadmin/docimport/images/background-image.png") no-repeat;

    height:500px;
    width:500px;

}
img#image{
 z-index:-1; 
}

.center{
    width: 400px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -200px;
    margin-top: -100px;
}

IE でのこの問題の修正は何ですか?

4

3 に答える 3

1

divに追加position:relative;してみてください:#firstlayer

#firstLayer {
    position: relative;
}

これは、イメージの z-index を無視する IE のバグに関係しています。これは、イメージが絶対に配置されているためです。親 div に相対的な位置を追加すると、この問題が解決します。

于 2012-11-02T09:38:40.693 に答える
1

このようなことを試してください。

 <div id="firstLayer" style="width:700px;height:700px;text-align:center;">
         <center>   <img id="image" class="center" src="My_Signature.jpg" 
                                   style="width:400px;height:200px;" > </center>
         <div id="mainContent">
          main page content
         </div>
  </div>

うまくいけば、それはあなたを助けるでしょう. 乾杯。!!

于 2012-11-01T16:43:27.140 に答える