在Internet Explorer 11中使用<picture>标签

Question

我在网上搜索了一段时间，但没有找到解决方案。

我正在尝试使用 slick 轮播图和新的 picture 标签，在所有浏览器中都很好用，除了 IE 11。有人知道 IE 11 的解决方法/填充程序吗？

- Lucky500

Answer 1

<picture> 标签是 HTML5 中的一部分，但在文档中，它的回退选项是 <img> 标签，即使在旧版浏览器上也可以使用。

<picture>
   <source media="(min-width: 64em)" src="high-res.jpg">
   <source media="(min-width: 37.5em)" src="med-res.jpg">
   <source src="low-res.jpg">
   <img src="fallback.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>

- zucc0nit

---

谢谢Zuch，我有不同宽度的图片需要加载，我将不得不为IE11找到一个解决方法。 - Lucky500

@Lucky500，你不能只为具有不同宽度的每个图像设置宽度和高度吗？ - zucc0nit

目前，浏览器根据浏览器窗口的宽度选择适当的图像。在IE11上，它只加载默认图像，忽略源标签。因此，我将只使用一个图像来处理IE，并相应地定位它。另一种选择是编写一个脚本来为IE交换图像，但我不认为我会选择这条路线。 - Lucky500

Answer 2

标准的<picture> 填充工具是Picturefill，它可以使该元素在IE8+中正常工作。

- Leland

---

Picturefill polyfill似乎没有得到积极维护。 - Kaushik Thirthappa

公平地说，尽管它非常稳定（没有特别令人担忧的未解决问题），并且被广泛使用。 - Leland