3

IE7 で奇妙な問題が発生しました。

各リスト項目内に絶対divの位置があります。しかし、絶対 div は IE7 の div 内に隠れています。最後の div は問題ないようです。

スクリーンショット

ここに画像の説明を入力

JSFIDDLE: http://jsfiddle.net/surjithctly/dEBuC/

HTML

<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>
<div class="listitem">  Some long content here bl a bla blaaaaaaa baaaaaaaaaaa  <div class="layer">I'm a layer</div>              </div>

CSS

.container {
    width:900px;
    margin:0 auto;
}

.listitem {
    position:relative;
    background:#00CC00;
    border-bottom:1px solid #FFF;
    min-height:30px;
}

.layer {
    position:absolute;
    top:10px;
    right:10px;
    padding:10px;
    background:#993300;
    border:solid 1px #FFF;
    z-index:100;
    overflow:visible;
}

IE7 でこの問題を修正する方法はありますか?

前もって感謝します。

4

3 に答える 3

0

実用的なソリューションは次のとおりです: (テスト済み: IE10、FF、Chrome、IE7/IE8/IE9 モードを使用した IE10)

http://jsfiddle.net/avrahamcool/dEBuC/4/

解決策は、スクリプトを使用しz-indexて要素に異なるものを与えることです。listitem

于 2013-09-10T11:31:10.180 に答える