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

Posted 2023-05-08

【中文标题】为啥我的滑块幻灯片中出现一个蓝色框

【英文标题】：Why does a blue box appears in my slider slide为什么我的滑块幻灯片中出现一个蓝色框

【发布时间】：2020-10-13 22:00:40

【问题描述】：

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

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

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

【问题讨论】：

请提供一个最小的、可重现的例子：***.com/help/minimal-reproducible-example

【参考方案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 像素。