Question

我在这里有一个wordpress网站bmfconstruction.com.au/new/，在项目部分，所有图片都在Chrome，Opera，IE中正常运行。根本没有在Firefox中加载图像。经过多个版本的测试。我试过禁用所有wordpress插件和许多东西，但没有任何好处。任何人都可以帮我弄清楚这个问题吗？

谢谢，马亨德拉

Answer 1

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

Answer 2

我使用以下代码使其成功：

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

投资组合图片未在Mozilla Firefox中加载

2 个答案: