Question

我在IE8中遇到了与z-index相关的问题。

这是小提琴：

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

第一个问题是，我想告诉你的问题是在小提琴中工作，有些东西我看不到它正在修复它。

但是，如果我保存整个小提琴页面并在IE8中打开，问题就会出现。所以，我喜欢WTF？

当您将鼠标悬停在预览图像上时，会显示一个较大的图像。但是这个LARGER预览的底部隐藏在鼠标悬停盒子下面的BOX的小图像背后。

这只发生在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

非常感谢！

编辑：

问题图片：

Error with IE 8 z-index

Answer 1

更新doctype

它会正常工作。

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

我在ie8

上测试过

否则你可以按f12并检查你的浏览器模式和文档模式： - ）

Answer 2

您只能使用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....
}

z-index IE8不工作，而在FF中则是

2 个答案: