我制作了一个垂直图像滑块，每个图像都是一个链接，当图像悬停时，一个不透明度为 0.4 的黑色“玻璃窗格”覆盖图像并显示一些文本。其实背景是透明的png
问题是它只能在谷歌浏览器中正确显示。
- Opera：我只看到玻璃窗格，但看不到上面的文字
- Firefox：我看不到玻璃窗格，但我仅在前 2 个项目中看到玻璃窗格上的文本，第三个文本未显示，并且图像之间的间距与 Google Chrome 和 Opera 显示的不同
- IE：图片间距与谷歌浏览器和Opera显示的不同，hover什么都不做，不显示玻璃窗格，甚至不显示文本。
http://alessandroderoma.it/try/slider/
谷歌浏览器中显示的内容需要在所有其他浏览器中显示。
但是，这是我正在使用的 html 代码：
<div id="vertical_slideshowwrapper">
<div class="vertical_slideshow" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; height: 489px;">
<ul style="margin: 0px; padding: 0px; position: relative; list-style-type: none; z-index: 1; height: 4564px; top: -1956px;">
<li style="overflow: hidden; float: none; width: 165px; height: 489px;">
<a href="#" target="_self">
<img src="images/1.png" border="0">
<div class="box"><p>Text 1</p></div>
</a>
<a href="#" target="_self">
<img src="images/2.png" border="0">
<div class="box"><p>Text 2</p></div>
</a>
<a href="#" target="_self">
<img src="images/3.png" border="0">
<div class="box"><p>Text 3</p></div>
</a>
</li>
<li style="overflow: hidden; float: none; width: 165px; height: 489px;">
<a href="#" target="_self">
<img src="images/4.png" border="0">
<div class="box"><p>Text 4</p></div>
</a>
<a href="#" target="_self">
<img src="images/5.png" border="0">
<div class="box"><p>Text 5</p></div>
</a>
<a href="#" target="_self">
<img src="images/6.png" border="0">
<div class="box"><p>Text 6</p></div>
</a>
</li>
<li style="overflow: hidden; float: none; width: 165px; height: 489px;">
<a href="#" target="_self">
<img src="images/7.png" border="0">
<div class="box"><p>Text 7</p></div>
</a>
<a href="#" target="_self">
<img src="images/8.png" border="0">
<div class="box"><p>Text 8</p></div>
</a>
<a href="#" target="_self">
<img src="images/9.png" border="0">
<div class="box"><p>Text 9</p></div>
</a>
</li>
</ul>
</div>
</div>
和CSS：
body{
background-color:#000;
}
DIV#vertical_slideshowfooter {
display:block;
padding-top: 10px;
font-family: Tahoma,Verdana,sans-serif;
font-size: 8px;
font-weight: bold;
}
div#vertical_slideshowwrapper {
width: 100%;
height: 100%;
overflow: hidden;
margin: 0px auto;
}
.vertical_slideshow ul li {
list-style:none;
margin-bottom:1px;
display:block;
}
.vertical_slideshow li img {
margin-right: 5px;
margin-top:1px;
margin-bottom:1px;
width: 160px;
height: 162px;
}
body{
padding-top:0px;
padding-left:0px;
margin-top:0px;
margin-left:0px;
}
.box {
position: relative;
left: 0;
margin-top: -163px;
width: 160px;
height: 163px;
background-image: url(images/bg.png);
background-position:0 0;
text-indent:-99999px;
}
.box:hover {
background-position:-160px 0;
text-indent:0;
}
.box p{
position:absolute;
font-family: Arial, Helvetica, Sans-Serif;
bottom: -8px;
right: 6px;
font-variant: normal;
font-weight: bold;
font-size: 11px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
}
.box a, a:visited, a:hover{
color:white;
text-decoration:none;
}
我究竟做错了什么？任何帮助，将不胜感激
CSS 验证器结果：