0

IE8 の z-index に関連する問題に悩まされています。

フィドルは次のとおりです。

http://fiddle.jshell.net/uFPBz/show/

最初の問題は、お見せしたい問題がフィドルで機能していることです。それを修正しているとは思えないものがあります。

ただし、そのフィドル ページ全体を保存して IE8 で開くと、問題が再発します。それで、私はWTFのようですか？

プレビュー画像にマウスオーバーすると、大きな画像が表示されます。しかし、この大きなプレビューの下部は、マウスオーバーされたボックスの下にあるボックスの小さな画像の後ろに隠れています。

これは IE8 でのみ発生し、より大きなPreviewBox の z-index は 3 ですが、ImgThumbBox の z-index は 2 です。

これを読む: http://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/およびこのIE 6 & IE 7 Z-Index Problemこれらの z-index プロパティは無関係であることがわかります。他のレベルにあります。しかし、私はそれを修正する方法がわかりません。

HTML をダウンロードして自分で確認すると、より良い結果が得られます。

http://www.filefactory.com/file/417sp9zi1lhp/n/HTML_Error_tar_gz

どうもありがとう！

編集：

問題の画像:

IE 8 z-index のエラー

4

2 に答える 2

2

文書型を更新する

それはうまくいきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

私はie8でテストしました

それ以外の場合は、f12 を押してブラウザ モードとドキュメント モードを確認してください :-)

于 2012-08-29T13:22:15.863 に答える
1

CSS のみを使用し、少ない HTML 行でタスクを実行できます。JSFiddleを参照してください。

あなたの場合、HTMLは次のとおりです。

<div class="container">         
  <img src="imagenes/thumb.jpg" alt="Miniatura">   
</div>

この CSS を使用できます。

div.container{
  position:relative; 
  display:inline-block; 
  float:left;    
  width: 122px;
  height: 160px; }    
div.container > img {
  position:relative;
  width: 122px;
  height: 160px;    
  display:block;}

div.container > img:hover {
  position: absolute;
  left: 50%;
  margin-left: -150px;
  top: 50%;
  margin-top: -175px;

  width: 300px;
  height: 350px;
  border:1px solid black;
  //use other styles....
}
于 2012-08-27T17:53:53.237 に答える