0

你好，我美妙的 CSS 朋友们！所以，今天我遇到了幻灯片放映的问题，因为某种我找不到的溢出问题没有显示出来。我知道这是溢出，因为当我将其更改为“可见”时，幻灯片会出现，但我的内容背景消失了，我根本无法弄清楚为什么会发生这种情况。我已经对这个网站和其他人进行了广泛的研究，试图找到类似的问题，但我似乎找不到任何类似的东西。

这是解释更多内容的代码：

内容的 CSS：

#body {
background:none #000;
margin-top:21px!important;
}
#body.home {
border:1px solid #4f4f4f;
margin:0 auto;
width:1100px;
}
#body.home div:first-child {
overflow:hidden;
}
#body.home div:first-child div:first-child {
border-bottom:0px solid #4f4f4f;
border-right:1px solid #4f4f4f;
float:left;
padding:0 0 13px;
width:510px;
}
#body.home div:first-child div:first-child h2 {
margin:13px 0 0 20px;
}
#body.home div:first-child div:first-child h2 a {
color:#fff;
font-family:oswaldregular;
font-size:18px;
font-style:normal;
font-weight:400;
line-height:18px;
margin:0;
text-decoration:none;
text-transform:uppercase;
}
#body.home div:first-child div:first-child p {
color:#a5a5a5;
font-size:14px;
line-height:18px;
margin:16px 0;
padding:0 30px 0 20px;
}
#body.home div:first-child div:first-child p a {
color:#a5a5a5;
font-style:normal;
margin:0;
text-decoration:underline;
}
#body.home div:first-child div:first-child a {
color:#af0000;
font-size:14px;
font-style:italic;
line-height:18px;
margin:0 0 0 20px;
text-decoration:none;
}
#body.home div:first-child div:first-child a:hover {
color:#ff0000;
text-decoration:none!important;
}
#body.home div:first-child ul {
border-bottom:1px solid #4f4f4f;
list-style:none;
margin:0;
overflow:hidden;
padding:0;
}
#body.home div:first-child ul li:first-child {
border:none;
}
#body.home div:first-child ul li {
border-left:1px solid #4f4f4f;
float:left;
width:auto;
}
#body.home div:first-child ul li h3 {
margin:23px 0 5px 20px;
}
#body.home div:first-child ul li span {
color:#a5a5a5;
display:block;
font-size:14px;
line-height:18px;
margin:1px 0 24px 20px;
}
#body.home div:first-child ul li a img {
border-top:1px solid #4f4f4f;
}
#body.home div {
border-bottom:none;
overflow:hidden;
}
#body.home div div:first-child {
border-bottom:none;
border-right:0px solid #4f4f4f;
float:left;
width:510px;
}
#body.home div div:first-child ul {
border-bottom:none;
}
#body.home div div:first-child ul li:first-child {
width:238px;
}
#body.home div div:first-child ul li {
border-right:1px solid #4f4f4f;

padding:0;
width:239px;
}
#body.home div div:first-child ul li a {
display:block;
float:none;
}
#body.home div div:first-child ul li a img {
border-bottom:1px solid #4f4f4f;
}
#body.home div div:first-child ul li h4 {
margin:9px 30px 0 20px;
}
#body.home div div:first-child ul li h4 {
color:#fff;
float:none;
font-size:14px;
font-style:normal;
font-weight:700;
line-height:18px;
text-decoration:none;
}
#body.home div div:first-child ul li p {
color:#a5a5a5;
font-size:14px;
line-height:18px;
margin:1px 30px 0 20px;
}
#body.home div div:first-child ul li p a {
color:#a5a5a5;
display:inline;
float:none;
font-style:normal;
margin:0;
text-decoration:underline;
}
#body.home div div {
float:left;
width:510px;
}
#body.home div div h3 a {
color:#FFF;
font-family:oswaldregular;
font-size:18px;
font-style:normal;
font-weight:400;
line-height:18px;
text-decoration:none;
text-transform:uppercase;
}
#body.home div div ul {
list-style:none;
margin:0;
padding:0;
}
#body.home div div ul li {
border-top:1px solid #4f4f4f;
overflow:hidden;
}
#body.home div div ul li a {
display:block;
float:left;
margin:0 20px 0 0;
}
#body.home div div ul li a img {
border-right:0px solid #4f4f4f;
}
#body.home div div ul li div {
width:298px;
}
#body.home div div ul li div span {
color:#a5a5a5;
display:block;
font-size:11px;
line-height:18px;
margin:11px 0 0;
}
#body.home div div ul li div h4 {
color:#fff;
float:none;
font-size:14px;
line-height:16px;
text-decoration:none;
}
#body.home div div ul li div p {
color:#a5a5a5;
font-size:14px;
line-height:18px;
margin:2px 0 0;
}
#body.home div div ul li div p a {
color:#a5a5a5;
display:inline;
float:none;
margin:0;
text-decoration:underline;
}
#body.home div div ul li div p a.more {
color:#AF0000;
display:inline;
float:none;
font-size:14px;
font-style:italic;
line-height:18px;
text-decoration:none;
}
#body.home div div ul li div p a.more:hover {
color:#ff0000!important;
text-decoration:none!important;
}

控制我正在使用的溢出的代码是第三个：

    #body.home div:first-child {
overflow:hidden;
}

当我将其更改为可见时，这是唯一进行任何更改的。

这是幻灯片的 CSS：

#slider {
position: relative;
width: 500px;
margin: 0px auto 0px auto;
}

#slider .viewer {
width: 500px;
height: 500px;
overflow: hidden;
margin: 0 auto;
}

#slider .viewer .reel {
display: none;
height: 500px;
}

#slider .viewer .reel .slide {
position: relative;
width: 500px;
height: 500px;
}

最后，这是内容的html：

<div id="body" class="home">
    <div>
        <div><br><br>
            <h2><a href="index.html">Welcome to our site!</a </h2>
            <p>
                Text. Text. Text. Text. 
            </p>
            <a href="services.html">Read More</a>         </div>

            <div id="slider">
                <div class="viewer">
                    <div class="reel">

                            <div class="slide"><img src="/images/img1.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img2.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img3.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img4.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img5.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img6.jpg" width="500" height="500" align="center" title="" /></div>
                            <div class="slide"><img src="/images/img7.jpg" width="500" height="500" align="center" title=" " /></div>
                            <div class="slide"><img src="/images/img8.jpg" width="500" height="500" align="center"  title="" /></div>
                            <div class="slide"><img src="/images/img9.jpg" width="500" height="500" align="center" title="" /></div>


                    </div>
                </div>
            </div>
  </div>

</div>
            <script type="text/javascript">
            $('#slider').slidertron({
                viewerSelector: '.viewer',
                reelSelector: '.viewer .reel',
                slidesSelector: '.viewer .reel .slide',
                advanceDelay: 6000,
                speed: 'slow'
            });
        </script>

如果您能看到幻灯片上的任何地方有溢出，请告诉我，因为我已经查看这段代码好几天了，我看不出哪里有溢出。啊！

提前感谢您的时间和帮助。

4

1 回答 1

0

我修好了它！div div 向左浮动，所以我尝试将浮动更改为“无”，我们就到了。背景突然出现在一切的背后。我必须保持溢出仍然可见，幻灯片才能显示出来，但只要我有背景和幻灯片，我不介意。我预计这不会有任何问题，因为它是一个静态页面。我要感谢大家提供的时间和建议。周末愉快！

于 2013-04-14T00:33:25.080 回答