内容 url 在 Firefox 浏览器上不显示图像，是否有不需要删除 alt 标签的解决方法？

Question

我想根据屏幕大小为我网站的用户提供不同的图像，但是在 css 中使用内容 url 不适用于 firefox，并且还需要使用 :after css 属性来提供图像（见下文）：

所有浏览器：

.AnImage{ 
  content: url("images/Home/2560/SimonAndGeorgia.jpg");
}

火狐：

.AnImage:after { 
  content: url("images/Home/2560/SimonAndGeorgia.jpg");
}

这种方法的问题是alt在firefox中显示并且必须删除！ 我想要 alt 标签，并且我想为不同大小的设备提供不同的图像以加快下载速度。

现在是 2017 年，肯定有人有解决方案，所以我可以两者都做？？？请

Answer 1

我最终更改了我所有的 content:url css 以包括 :after 与 firefox 一起使用。

.AnImage, .AnImage:after{ 
  content: url("images/Home/2560/SimonAndGeorgia.jpg");
}

与此 javascript 代码耦合以删除 firefox 中的 alt 标签：

 // Firefox 1.0+
    if (typeof InstallTrigger !== 'undefined') {
        //alert("we are using firefox");
        var elements = document.getElementsByTagName('img');
        for (var i = 0, len = elements.length; i < len; i++) { 
     elements[i].removeAttribute('alt'); }
    }

因此 alt 标签用于 SEO，但在使用 Firefox 时被删除。