IE11 中的 HTML5 图片元素错误答案

【问题标题】：HTML5 picture element bug in IE11IE11 中的 HTML5 图片元素错误
【发布时间】：2019-07-22 04:36:39
【问题描述】：

这里是代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
body, div, html
{
 align-items: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 width: 100%;
}
form
{
 align-items: center;
 display: flex;
 flex-direction: column;
 justify-content: center;
 max-width: 1280px;
 width: 100%;
}
img
{
 flex: none;
 max-width: 100%;
 min-height: 1px;
 width: 100%;
}
picture {width: 80%;}
#temp {background-color: red;}
</style>
</head>

<body>
<form id="form1">
<picture>
  <source media="(max-width: 600px)" srcset="../tmp.jpg">
  <source media="(max-width: 960px)" srcset="../tmp.jpg">  
  <img src="../tmp.jpg">                
</picture>        
<div id="temp">123123123123</div>
</form>

</body>
</html>

为什么 ie 中的图片元素在 chrome 中没有出现这个空白？ IE版本是Windows 10中的IE 11，Chrome版本是57.0.2987.110。 IE有什么问题？以及如何删除 IE 中的空白？谢谢

【问题讨论】：

因为IE不支持这个元素？ caniuse.com/#search=picture MS 中的第一个支持是 Edge 13
我又试了几次，发现问题似乎出在flexbox上。如果不用flexbox，已经可以了。可能flexbox和图片元素有点麻烦。
IE11不支持图片元素。 caniuse.com/#picture 并呈现为 HTMLUnknown 的内联元素。要解决此问题，只需删除图片{width:80%} 规则...（图片元素是分组元素，即它们将一组 img 元素分组）
感谢 Rob Parsons 的回复。我尝试删除图片{width:80%} 规则，它使用了。但是我需要将宽度减小到 80%。我尝试将它的父 div 宽度设置为 80 %，但问题又来了。如何将宽度设置为 80%？

标签： html css internet-explorer

【解决方案1】：

你可以试试这个，也许它可以在你的浏览器中运行。

<style type="text/css">
img {
        width:100%;
        max-width:100%;
        min-height:1px;
        -webkit-flex:none;
        -moz-flex:none;
        -ms-flex:none;
        -o-flex:none;
        flex:none;
    }
    form {
        max-width:1280px;
        width:100%;
        -webkit-display:flex;
        -moz-display:flex;
        -ms-display:flex;
        -o-display:flex;
        display:flex;
        -webkit-justify-content:center;
        -moz-justify-content:center;
        -ms-justify-content:center;
        -o-justify-content:center;
        justify-content:center;
        -webkit-align-items:center;
        -moz-align-items:center;
        -ms-align-items:center;
        -o-align-items:center;
        align-items:center;
        -webkit-flex-direction:column;
        -moz-flex-direction:column;
        -ms-flex-direction:column;
        -o-flex-direction:column;
        flex-direction:column;
    }
    html, body, div{
        width:100%;
        -webkit-display:flex;
        -moz-display:flex;
        -ms-display:flex;
        -o-display:flex;
        display:flex;
        -webkit-justify-content:center;
        -moz-justify-content:center;
        -ms-justify-content:center;
        -o-justify-content:center;
        justify-content:center;
        -webkit-align-items:center;
        -moz-align-items:center;
        -ms-align-items:center;
        -o-align-items:center;
        align-items:center;
        -webkit-flex-direction:column;
        -moz-flex-direction:column;
        -ms-flex-direction:column;
        -o-flex-direction:column;
        flex-direction:column;
    }
    picture {            
        width:80%;
    }
    #temp {
        background-color:red;
    }
</style>

thanks!

【讨论】：

谢谢大佬帮忙，我刚试了下，怕是没用。
先生，如果你不敢看代码，你可以试试这个，只有ie -
-ms-justify-content:center;
我刚试了下，还是不行。我想可能是问题是有人说IE11中的图片元素不支持
@MelonNG 据我了解，IE11 缺乏支持只是意味着它忽略了picture 和source 元素。只要你有一个img 和一个有效的src 属性作为picture 的子属性，它就应该回到那个状态，就好像其他标记不存在一样。