带有 srcset 的响应图像在 IE11 中不起作用

Question

<img srcset="assets/img/pages/support-and-services/hub/head1-40w.png 40w,
             assets/img/pages/support-and-services/hub/head1-80w.png 80w" 
     sizes="40px" 
     src="assets/img/pages/support-and-services/hub/head1-80w.png 80w" 
     class="d-none d-lg-inline" alt="head icon" />

以上是有问题的代码。我的图像没有显示在 IE 中。检查网络后，我发现它正在尝试获取 "assets/img/pages/support-and-services/hub/head1-80w.png%2080w" 处的图像。

所以它以某种方式认为“80w”是图像的一部分 url 并在末尾附加“%2080w”。当然，当它去获取它时，该图像不存在于该位置。

我认为我没有错误地使用源集？而且我似乎找不到其他人有这个问题，而且它只在 IE 中。请帮忙！

先谢谢大家了！

Answer 1

您不能在 src 属性中使用“80w”。 IE doesn't support srcset 属性，所以它会寻找 src 属性来找到图像 url。您带有“80w”的 src 值是错误的，因此 IE 无法找到正确的图像 url。

其他支持srcset的浏览器直接使用srcset值作为图片url。我们可以在 srcset 值中直接使用正整数后跟 w 这样它是正确的，浏览器可以找到正确的图像 url.

总之，你scrset的值设置正确，src的值设置错误。应该是 src="assets/img/pages/support-and-services/hub/head1-80w.png".

带有 srcset 的响应图像在 IE11 中不起作用

Responsive image with srcset not working in IE11

html

internet-explorer

responsive-design

internet-explorer-11

srcset