我的IE中的z-index存在问题。当我从数据库加载数据时，使用可以滚动徽标，CSS弹出框将显示描述。它适用于除IE之外的所有浏览器。弹出框z-index似乎没有被调用。它将呈现在当前徽标之前绘制的徽标之上，但会显示在之后绘制的徽标下。
见http://tempcfo.com/testimonials.php
这是我的代码
... CSS
.thumbnail{
position: relative;
}
.thumbnail:hover{
text-decoration:none;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background:#E2E2E2;
background-repeat:no-repeat;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
width:265px;
height:195px;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding:0px;
float:left;
z-index:0;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -77px;
padding:10px;
left:135px; /*position where enlarged image should offset horizontally */
float:left;
text-decoration:none;
z-index:500;
}
.thumbnail2{
position: relative;
}
.thumbnail2:hover{
text-decoration:none;
}
.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background:#E2E2E2;
background-repeat:no-repeat;
padding: 0px;
visibility: hidden;
color: black;
text-decoration: none;
width:265px;
height:195px;
}
.thumbnail2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding:0px;
float:right;
z-index:0;
}
.thumbnail2:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -77px;
padding:10px;
right:138px; /*position where enlarged image should offset horizontally */
float:right;
text-decoration:none;
z-index:500;
}
HTML ...
<div id="logos" >
<table cellspacing="5" >
<tr>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail" href="#success_page" style="border:none; outline:none; cursor:default;">
<img src="images/logo/20120830005810.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
“I hired tempCFO on a contracting basis to be the first CFO of my start-up company. They performed their role extremely well, building up our chart of accounts, developing a sophisticated financial model, creating powerful board presentations and overseeing the accounting function.
-Tom Mohr, Digital Air Strike </td>
</tr>
<tr>
<td class="quotee">
Tom Mohr - Digital Air Strike </td>
</tr>
</table>
</span>
</a>
<table width="138" >
</table>
</td>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail" href="#success_page" style="border:none; outline:none; cursor:default;">
<img src="images/logo/20120830005827.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
Mitrionics AB is the technology leader in FPGA-based processing for Accelerated Computing, providing greater processing performance and a greener computing alternative, because of lower energy consumption. </td>
</tr>
<tr>
<td class="quotee">
</td>
</tr>
</table>
</span>
</a>
<table width="138" >
</table>
</td>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;">
<img src="images/logo/20120830005843.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
RelayHealth provides connectivity solutions that make it easy for consumers and healthcare organizations to securely exchange information. </td>
</tr>
<tr>
<td class="quotee">
</td>
</tr>
</table>
</span>
</a>
<table width="138" >
</table>
</td>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail2" href="#success_page" style="border:none;outline:none; cursor:default;">
<img src="images/logo/20120830005855.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
Propero Solutions offers world-class expertise in agile software development, Scrum methodology, agile project management, extreme programming (XP), lean and kanban development methods. </td>
</tr>
<tr>
<td class="quotee">
</td>
</tr>
</table>
</span>
</a>
<table width="138" >
</table>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#EDEDED" align="center" height="105" width="140">
<a class="thumbnail" href="#success_page" style="border:none; outline:none; cursor:default;">
<img src="images/logo/20120830005906.png"width="85%" border="0" />
<span>
<table>
<tr>
<td class="popup_title">
</td>
</tr>
<tr>
<td class="short_desc">
Glam Media is the pioneer and global leader of Vertical Media—a revolutionary new media model that combines our flagship properties with curated publisher sites and their passionate, engaged audiences. </td>
</tr>
<tr>
<td class="quotee">
</td>
</tr>
</table>
</span>
</a>
......
感谢您的帮助。
答案 0 :(得分：1)
我想出来了。该页面很旧并且是由其他人编写的。他们正在使用这个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
一旦我升级到
<!DOCTYPE html>
z-index开始正常工作。如此简单，浪费了这么多时间。
答案 1 :(得分：0)
我很确定这与IE处理z-index的方式有关。在Internet Explorer中，定位元素生成一个新的堆栈上下文，从z-index值0开始。因此z-index无法正常工作 - 为父元素提供更高的z-index通常可以修复bug。
我打算看看我是否可以举例说明如何更改代码，但似乎您正在对您提供的示例网址进行更改。