Mozilla Firefox中未加载公文包图像

Portfolio images not loading in Mozilla Firefox

本文关键字：公文包 图像 加载 Firefox Mozilla      更新时间：2023-09-26

我在这里有一个wordpress网站bmfconstruction.com.au/new/，在项目部分，所有图像都在Chrome、Opera和IE中加载良好。这些图像根本没有在firefox中加载。在多个版本中进行了测试。我试过禁用所有的wordpress插件和许多东西，但没有任何好处。有人能帮我解决这个问题吗？

谢谢，Mahendra

我认为您的问题可能是过滤器灰度.svg

所以尝试更改此代码：

.portfolio-item .portfolio-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover !important;
    display: block;
    filter: url("grayscale.svg");
    overflow: hidden;
    padding-bottom: 65%;
    position: relative;
}

到此代码：

.portfolio-item .portfolio-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover !important;
    display: block;
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
    overflow: hidden;
    padding-bottom: 65%;
    position: relative;
}

或者只是为了适应Firefox：

.portfolio-item .portfolio-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover !important;
    display: block;
    filter: url("grayscale.svg");
    -moz-filter: url("grayscale.svg");
    overflow: hidden;
    padding-bottom: 65%;
    position: relative;
}

我使用以下代码使其工作：

.portfolio-item .portfolio-image {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover !important;
    display: block;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg''><filter id=''grayscale''><feColorMatrix type=''matrix'' values=''0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0''/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
     -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    overflow: hidden;
    padding-bottom: 65%;
    position: relative;
}
相关文章：