Microsoft Edge 16 中的图像被压缩 - Edge 中的小图像

Question

Microsoft Edge 16 中存在错误（已多次报告并在此处确认：https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7778808/。

它将图像压缩到 30 像素的高度。这是一个例子：

为什么会发生这种情况，如何解决？

Answer 1

修正

如果您使用的是 Wordpress，请将其插入 functions.php 文件的底部：

/*
 * Work-around for Microsoft Edge bug ( https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7778808/ )
 */
function custom_edge_browser_fix() {
  global $is_edge;
  if( $is_edge ){
    add_filter('wp_calculate_image_srcset', '__return_false');
  }
}
add_action( 'init', 'custom_edge_browser_fix' );

它在 Microsoft Edge 浏览器中禁用（删除）这个 srcset 标签。这可能会对 Microsoft Edge 中页面的加载时间产生轻微影响，但使用该浏览器的人无论如何都没有灵魂......

解释

我在一家机构工作，在过去 2 天内，我们从 3 个单独的来源报告了这一点，所以我认为它一定发生了很多次。

该错误（据我所知）仅存在于 Microsoft Edge 中，并且与低带宽连接有关。正如可以在错误报告中看到的那样，它似乎并不是在每次加载时都会出现，错误发生的连接速度较慢。所以这是一个极端的案例。

srcset 是一个标签，可用于根据加载网站时视口的大小显示不同大小的图像。 Wordpress 会自动生成不同大小的标签，并自动生成此标签并将其添加到图像上。如果删除标签（如上面编写的代码在 Microsoft Edge 中所做的那样），则每次都会加载原始大小的图像，而不管视口的大小。

如果您收到此错误并且您没有使用 WordPress，- 那么您可以通过以另一种方式删除 srcset-标签来解决它...或者等待 Edge 17被释放和推出。 :-)

少量添加

我必须清除服务器缓存才能使修复在某些页面上生效。也可以等待一段时间（比如一天左右），让缓存自行过期。

Answer 2

问题已在 Creators Update Fall 中发布的 Edge 版本中修复。

Answer 3

我在 Chrome 上也看到过这个错误，还有其他人吗？到目前为止不如 IE Edge，但我在我的 wordpress 网站上的 Chrome 上遇到过它。

Answer 4

Picturefill polyfill 怎么样？

Microsoft Edge 16 中的图像被压缩 - Edge 中的小图像

Images are being squished in Microsoft Edge 16 - Small images in Edge

wordpress

browser

responsive-design

microsoft-edge

srcset