Question

以下是代码：

  <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="N.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runa`enter code here`t="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        img {
            width:100%;
            max-width:100%;
            min-height:1px;
            flex:none;
        }
        form {
            max-width:1280px;
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            width:100%;
        }
        html, body, div{
            display:flex;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            width:100%;
        }
        picture {            
            width:80%;
        }
        #temp {
            background-color:red;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">                
            <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>

为什么图片中的图片元素在chrome中不显示？ IE版本是Windows 10中的IE 11，Chrome版本是57.0.2987.110。 IE有什么问题？如何删除IE中的空白？谢谢

Answer 1

sir, You can try this . May be it works in your browser.
<style>
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!

ie11中的html5图片元素错误

1 个答案: