Question

我的网站上有一个图片幻灯片：http://dev.jmret.com/recruit.php

但是我有一个问题，它在注释下面有一条灰线。

见这里：

这是代码：

$(function(){
            $('#slides').slides({
                play: 5000,
                pause: 2500,
                hoverPause: true,
                animationStart: function(current){
                    $('.caption').animate({
                        bottom:-35
                    },100);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationStart on slide: ', current);
                    };
                },
                animationComplete: function(current){
                    $('.caption').animate({
                        bottom:0
                    },200);
                    if (window.console && console.log) {
                        // example return of current slide number
                        console.log('animationComplete on slide: ', current);
                    };
                },
                slidesLoaded: function() {
                    $('.caption').animate({
                        bottom:0
                    },200);
                }
            });
        });

我如何摆脱灰线？那看起来？非常感谢正确方向的修正或点。如果您在网站上查看来源，您将看到您需要的任何其他内容。

这是HTML＆amp; CSS：

<div id="slides">
            <div class="slides_container" style="overflow: hidden;position: relative;display: inline-block;">
            <div class="slides_control" style="position: relative; width: 3339px; height: 228px; left: -1113px;"><div class="slide" style="position: absolute; top: 0px; left: 2226px; z-index: 0; display: block;">
                        <a href="/eduforschools.php">
                        <img src="img/Slide1.jpg" width="1000px" height="225px" alt="Slide 1"></a>
                        <div class="caption" style="bottom: 0px;">
                            <p>We support recruitment &amp; education in over 140 local schools.</p>
                        </div>
                    </div><div class="slide" style="position: absolute; top: 0px; left: 1113px; z-index: 5; display: block;">
                        <a href="/recruit.php">
                        <img src="img/Slide2.jpg" width="1000px" height="225px" alt="Slide 1"></a>
                        <div class="caption" style="bottom: 0px;">
                            <p>Apprenticeships – wide range available.</p>
                        </div>
                    </div></div>
                        </div>
            <ul class="pagination"><li class="current"><a href="#0">1</a></li><li class=""><a href="#1">2</a></li></ul></div>

由于

Answer 1

将此css添加到您的样式中：

.slide a img {
   display: block;
}

你正在看到下降空间（悬挂的空间） “y”和“p”的底部，因为默认情况下img是一个内联元素。

来自https://stackoverflow.com/a/7774854/5925366

Answer 2

尝试添加margin-bottom：3px;到your.caption课程。

Answer 3

这不是一条灰线。这是由于标题的填充底部溢出图像本身引起的。您可以通过添加margin-bottom来修复它：5px;到.caption类

造成灰线的原因是什么？

3 个答案: