Question

我制作了一个垂直图像滑块，每个图像都是一个链接，当图像悬停时，一个0.4不透明度的黑色“玻璃窗格”覆盖图像并显示一些文本。实际上背景是透明的png

问题是它只能在Google Chrome中正确显示。

Opera：我只看到了玻璃窗格，但没有看到它上面的文字
Firefox：我看不到玻璃窗格，但是我只看到前两个项目的玻璃窗上的文字，第三个文字没有显示，图像之间的间距与谷歌浏览器和Opera不同显示
IE：图片之间的间距与谷歌Chrome和Opera显示的不同，悬停不做任何事情，没有显示玻璃窗格，甚至没有显示文字。

Google Chrome中显示的内容需要在所有其他浏览器中显示。

但是，这是我正在使用的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验证器结果：

http://jigsaw.w3.org/css-validator/validator?uri=alessandroderoma.it%2Ftry%2Fslider&profile=css3&usermedium=all&warning=1&vextwarning=&lang=it

Answer 1

放置在html页面的行顶部下方。

<!DOCTYPE html>

类似post

修改
我认为歌剧中存在text-indent的问题我可以建议你一个答案最初将文字颜色设为黑色，当悬停时将其设为白色

.box { position: relative; left: 0; margin-top: -163px; width: 160px; height: 163px; background-image: url(images/bg.png); background-position:0 0; color:black; /*added*/ } .box:hover { background-position:-160px 0; text-indent:0; color:white; /*added*/ }

Answer 2

只是一个建议：其他浏览器不支持某些css标签，也许您可能想要检查它对于IE http://www.quirksmode.org/css/condcom.html 你看看这个链接http://www.quirksmode.org/css/contents.html

了吗？

Answer 3

正如New Developer所说，我添加了

<!DOCTYPE html>

在我的HTML文档的顶部，它使得我的html输出在所有浏览器上非常相似，并且还使用鼠标在css上使用IE，但是没有解决我的问题，Opera，文本结束图像仍未显示。我google了很多，我发现Opera只为block元素启用了文本缩进，但即使添加了

display: inline-block

到我的.box元素并没有解决问题，所以我必须找到一个解决方法。

我使用padding代替text-indent解决了问题：

.box {
    padding-left: 99999px;
    overflow: hidden;
}

.box:hover {
    padding-left: 0px;
}

它有效，它不是解决方案，但对我来说这是一个很好的解决方法。

感谢所有帮助过的人！

Answer 4

您可以使用背景色而不是图像。因为您可以像图像一样设置背景颜色的透明度。将滑块的标题放入div类中，并记下以下代码以获得所需的输出。

.your_css_class
{
背景：＃FDF7A6; / *设置背景颜色* /
不透明度：0.5; / *设置不透明度* /
}

还要记住设置div类的宽度，高度和位置。希望这对你有用。

图片悬停仅在Google Chrome上正常运行

4 个答案: