我只有在 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>
......
谢谢你的帮助。