0

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

这是小提琴：

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

第一个问题是我想向您展示的问题正在处理中，有一些我看不到的东西正在修复它。

但是，如果我保存整个小提琴页面并在 IE8 中打开，问题又回来了。所以，我喜欢WTF？

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

这只发生在 IE8 中，largerPreviewBox 的 z-index 为 3，而 ImgThumbBox 的 z-index 为 2。

阅读此内容：http ://caffeineoncode.com/2010/07/the-internet-explorer-z-index-bug/和这个IE 6 & IE 7 Z-Index 问题我认为这些 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 回答