css - img 标签仅在 FireFox 中不显示背景图像

Question

我有一个图片库，图片在所有其他浏览器(IE、Chrome、O、Saf)上显示正常，但拒绝在 Firefox 上显示。图像显示如下:

<section class="p-0" id="portfolio">
    <div class="container-fluid p-0">
        <div class="row no-gutters popup-gallery">
            <div class="col-lg-4 col-sm-6">
                <a class="portfolio-box" href="http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png">
                    <img class="img-fluid" src="" style="background-image: url(http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png);" alt="">
                    <div class="portfolio-box-caption">
                        <div class="portfolio-box-caption-content">
                            <div class="project-category text-faded">
                                Web
                            </div>
                            <div class="project-name">
                                TechGorilla UI example site
                            </div>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
</section>

我将 src 设置为空，因为我有背景图片。其 CSS 如下:

.portfolio-box {
    position: relative;
    display: block;
    margin: 0 auto;
}

.portfolio-box .img-fluid {
    min-width: 100%;
    min-height: 300px;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    border:0;
}

.portfolio-box .portfolio-box-caption {
    position: absolute;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    background: rgba(240, 95, 64, 0.9);
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    transition: all 0.2s;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    text-align: center;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category,
.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    padding: 0 15px;
    font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
    font-size: 18px;
}

.portfolio-box:hover .portfolio-box-caption {
    opacity: 1;
}

.portfolio-box:focus {
    outline: none;
}

@media (min-width: 768px) {
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-category {
        font-size: 16px;
    }
    .portfolio-box .portfolio-box-caption .portfolio-box-caption-content .project-name {
        font-size: 22px;
    }
}

它在其他任何地方都可以正常工作，这不是浏览器找不到某些变量的问题(也就是需要 -mos-transition 等)，我有一个脚本可以自动修复这个问题。

我已经用谷歌搜索过，但没有发现任何类似的问题，我已经使用 firefox/google/etc devtools 添加/删除元素来尝试让它工作无济于事

Answer 1

看来，与所有其他浏览器不同，在 FF 中您需要指定“显示”属性。简单地添加

display: block;

上课

.portfolio-box .img-fluid

现在可以完美地显示图像，我之前没有尝试过，因为我认为它是默认继承的