CSS幻灯片首次在网站上不能正确显示图像
CSS幻灯片首次在网站上不能正确显示图像
提问于 2014-12-18 00:22:10
我是荷兰音乐团体The Cast的网站管理员。我没有开发这个网站，我只是让它保持更新。我只有足够的HTML知识来做这件事。最近首页的幻灯片出现了一些问题，在某些系统上的一些浏览器中，当你第一次打开网站时，图片只显示在一个7x18像素的矩形中。然后，当你从站点内部导航到主页时，它工作正常，当你刷新它时，它又出错了。我真的希望有人能帮我。
HTML代码：
<!-- 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;
}*(在Safari中的Mac OS(不确定是哪个版本)、Chrome和Firefox中的Windows 7以及Chrome中的Windows 7上报告的问题)
Stack Overflow用户
发布于 2014-12-18 02:57:00
将此css样式替换为style.css的480行。
div#slideshow ul#slides {
margin: 0 auto;
width: 960px !important;
height: 380px !important;
position: absolute;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27530264
复制相关文章
相似问题
腾讯云开发者
