【发布时间】：2013-02-03 19:03:03
【问题描述】：
我制作了一个垂直图像滑块，每个图像都是一个链接，当图像悬停时，一个不透明度为 0.4 的黑色“玻璃窗格”覆盖图像并显示一些文本。其实背景是一个透明的png
问题是它只能在谷歌浏览器中正确显示。
- Opera：我只看到玻璃窗格，但看不到上面的文字
- Firefox：我看不到玻璃窗格，但我只看到前 2 个项目的玻璃窗格上的文本，第三个文本没有显示，并且图像之间的间距与 Google Chrome 和 Opera 不同显示
- IE：图片间距与 Google Chrome 和 Opera 显示的不同，悬停不执行任何操作，不显示玻璃窗格，甚至不显示文本。
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 验证器结果：
【问题讨论】：
-
可以稍微整理一下。您有多个 id="box" 的元素，这是无效的。此外，您在 CSS 中有几个地方
<length>类型属性没有单位，例如#box { 边距顶部：-163; }，这也是不正确的。 -
从 w3c 验证器检查我的链接，我在每个长度上添加了不同于 0 的度量单位，从 id="box" 更改为 class="box" 也没有效果。