Question

我是荷兰音乐团体The Cast的网站管理员。我没有开发网站，我只是保持更新。我只有足够的HTML知识才能做到这一点。最近，首页上的幻灯片显示有些问题，在某些系统的某些浏览器中*首次打开网站时，图像仅显示在7 x 18像素的矩形中。然后，当您从站点内部导航到主页时，它可以正常工作，当您刷新它时，它会再次出错。我真的希望有人能帮助我。

HTML CODE：

   <!-- slideshow -->
            <div id="slideshow">
                <ul id="slides">
                    <li><img src="slides/01.jpg"  alt="Imagen" /></li>
                    <li><img src="slides/02.jpg"  alt="Imagen" /></li>
                    <li><img src="slides/03.jpg"  alt="Imagen" /></li>
                    <li><img src="slides/04.jpg"  alt="Imagen" /></li>
                </ul>
                <span></span>
                <a href="#"><img src="img/prev-slide.png"  alt="Prev" id="prev" /></a>
                <a href="#"><img src="img/next-slide.png"  alt="Next" id="next" /></a>
            </div>
            <!-- ENDS slideshow -->

CSS代码。（与幻灯片有关）。

div#slideshow{
    overflow: hidden;
    position: relative;
    height: 380px;
    width: 960px;
}

div#slideshow ul#slides{
    margin: 0 auto;
    width: 960px;
    height: 380px;
    position: absolute;
}

div#slideshow ul#slides img{
    border-radius:15px;
    width: 960px;
    height: 380px;

}

div#slideshow-arrows{
    margin: 0 auto;
    z-index: 900;
    width: 1000px;
    height: 57px;
}    

div#slideshow img#prev{
    position: absolute;
    top:180px;
    left: 1px;
    z-index: 20;
}

div#slideshow img#next{
    position: absolute;
    top: 180px;
    right: 1px;
    z-index: 21;
}    

div#slideshow span{
    border-radius:15px;
    border:3px solid white;
    width: 954px;
    height: 374px;
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}

#slideshow-nav{
    display: block;
    position: absolute;
    overflow: hidden;
    bottom: 18px;
    right: 20px;
    z-index: 20;
}

#slideshow-nav a { 
    display: block;
    float: left;
    background: url(../img/slidebutton.png) no-repeat; 
    height: 15px;
    width: 15px;
    text-indent: -9000px;
    margin-right: 5px;
}

#slideshow-nav a.activeSlide { 
    background: url(../img/slidebutton-over.png) no-repeat; 
}    

div.fade-slide{
    overflow: hidden;
    height: 345px;
    border: 2px solid white;
}

*（在Mac OS上报告的问题（不确定哪个版本）在Safari中，在Windows 7中的Chrome和Firefox以及另一个在Windows 7中的Chrome中报告）

Answer 1

在480行的style.css处替换此css样式。

div#slideshow ul#slides {
    margin: 0 auto;
    width: 960px !important;
    height: 380px !important;
    position: absolute;
}

CSS幻灯片不能在网站上第一次正确显示图像

1 个答案: