IE11 中的 HTML5 图片元素错误

这是Chrome中正确的结果

这是IE中错误的结果

这是代码：

<!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 中的图片元素显示为空白，而在铬中则不显示？IE版本是Windows 11中的IE 10，Chrome版本是57.0.2987.110。IE有什么问题？以及如何删除IE中的空白？谢谢

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

<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!

相关内容

最新更新

热门标签：