javascript - 是什么引起灰线？

我的网站上有一个图片幻灯片：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和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>

谢谢

最佳答案

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

.slide a img {
   display: block;
}

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


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