幻灯片标题高度不符合我的CSS属性

时间:2013-07-25 02:06:10

标签: css css3

为什么我的幻灯片标题根据我的CSS属性没有变化?

这基本上就是我的幻灯片标题的工作原理

<div id="Slideshow">
<img src="image/s1.jpg" name="slide">
<script type="text/javascript">
<!--
var step = 1
function slideit() {
    document.images.slide.src = eval("image" + step + ".src")
    if (step < 5)
        step++
    else
        step = 1
    setTimeout("slideit()", 2500)
}
slideit()
//-->
</script>
</div>

正如您所看到的,我将覆盖幻灯片的CSS称为“幻灯片”

这是我的“幻灯片”CSS

#Slideshow
{
  position:absolute;
  top:121px;
  left:0%;
  width:100%;
  margin: 0px;
  height:150px;
}

尽管添加了宽度/高度属性,但幻灯片显示不会在视觉上改变。

1 个答案:

答案 0 :(得分:0)

我看到这些属性工作正常。我设置了这个:

<强> The Fiddle

所以你可以看到它正常工作,它从顶部定位了121个像素,我将背景设为黑色,这样你就可以看到它的正确高度为150px。

我还继续通过给它空格并删除Zeros旁边的一些剩余字符来清除CSS上的格式

#Slideshow {
  background: #000;
  position: absolute;
  top: 121px;
  left: 0;
  width: 100%;
  margin: 0;
  height: 150px;
  overflow: hidden;
}

我还应该提到我添加了overflow: hidden;,因为我的图像太大了,所以overflow: hidden;可以防止元素溢出(在这种情况下是一个图像)来自它的父容器。 / p>

如果这澄清了你的问题,请告诉我。