Javascript Mozilla Firefox中未加载公文包图像

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

谢谢，

---

Mahendra

我认为您的问题可能是过滤器greyscale.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;
}

根据本守则：

.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;
}

.portfolio item.portfolio image{
背景位置：中心；
背景重复：无重复；
背景尺寸：封面！重要；
显示：块；
过滤器：url（“数据：图像/svg+xml；utf8，#灰度”）；/*Firefox 10+，Android上的Firefox*/
过滤器：灰色；/*IE6-9*/
-webkit过滤器：灰度（100%）；/*Chrome 19+、Safari 6+、Safari 6+iOS*/
溢出：隐藏；
垫底：65%；
位置：相对位置；
}

嗨，比利，谢谢你的帮助。上述代码不起作用。