为什么我的滑块幻灯片中出现一个蓝色框

Question

我创建了一个从 XML 文件加载内容的滑块。如果没有添加图片，则打印文字“Photo available Soon”，如果有图片，则显示图片。

您可以查看：http://theguest.houston-1.hybridmedia.be/#the-guests

我只向 XML 中的第二个元素添加了一个图像。但所有其他元素，它显示一个蓝色框。我不明白这是从哪里来的。我也无法检查该元素。

Answer 1

蓝色框与以下元素的背景颜色有关：

<div class="slider slick-initialized slick-slider" id="slider"></div>

CSS

.slider {
    background-color: #00f;
    border: 3px solid #d0de36;
    margin: 0 auto;
    max-width: 20rem;
    position: relative;
    width: 100%;
    z-index: 1;
}

此元素的高度由其中一个子元素设置：

<div class="slick-slide" data-slick-index="1" aria-hidden="true" style="width: 314px;" tabindex="-1"><div><div class="slider__slide" style="width: 100%; display: inline-block;"><img src="img/guests/aion.jpg"><span class="name">Aion</span></div></div></div>

高度为 415 像素。