IE浏览器中< img ... />标签不显示图片

IE浏览器< img … /> 不显示

问题描述:

<!-- 代码部分 -->
<html>
    <head>
        <meta charset="UTF-8">
        <title>演示</title>
    </head>
    <body>
        <h1>演示</h1>
        <img src="1.png" width="295" height="276"/>
    </body>
</html>
<!-- 图片部分 -->

Chrome:

Chrome显示结果


IE:
IE显示结果

问题分析:

问题分析

1、从属性上看是不支持PNG格式,(简直在说梦话),那么究其原因是什么呢?
2、对于图片我是新建.txt文件,然后重命名为.png,然后使用画图工具进行编辑,最后直接保存的
3、(注:有些不能显示可能是src=“”的路径问题,单词拼写错误问题,等等其他,如果点击“右键–>属性”类型不可用时可以试试本方案)

解决方案:

这里写图片描述


这里写图片描述

重新保存图片为png格式即可,不一定是png,同理其他格式类型不可用也是同样道理
正常显示啦:

IE正常显示图片

再来看属性
属性

对下面的代码加注释:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <style> #backg { width: 919px; height: 272px; } div img { width: 300px; height: 222px; margin-top: 20px; margin-left: 10px; } #h3 { color: rgb(132, 106, 90); font-weight: 600; font-size: 23px; margin-top: -224px; margin-left: 340px; } #p1 { font-size: 14px; color: rgb(20, 111, 158); font-weight: 550; margin-top: 13px; margin-left: 340px; } #p2 { width: 575px; font-size: 13.2px; color: black; text-indent: 2em; margin-top: -3px; margin-left: 340px; } #p2 span { color: rgb(20, 111, 158); font-style: italic; text-decoration: underline; } #p3 { font-size: 14px; color: rgb(20, 111, 158); font-weight: 550; margin-top: 10px; margin-left: 340px; } #p3 span { color: red; font-size: 20px; font-weight: 800; } hr { width: 560px; margin-top: -2px; margin-left: 340px; } #p4 { color: rgb(132, 106, 90); font-weight: 540; font-size: 23px; margin-top: 12px; margin-left: 340px; } #p4 span { color: red; font-weight: 800; } </style> <body> <div id="backg"> <img src="./img/bk01.png" alt=""> <div id="h3">Web前端开发工程师</div> <p id="p1">技术要求:</p> <p id="p2">对常用的一些Js框架了解,如jQuery、YUuI等。掌握最基本的JavaScript计算方法编写。对目前互联网流行的网页制作方法(Web2.0) HTML+CSS,以及各大浏览器兼容性有很大的了解。对前沿技术(HTML5+CSS3)的基本掌握。<span>Web前端技术</span>你究竟掌握了多少...</p> <p id="p3">更新时间:2015年05月19日20点(已有<span>325</span>人点赞)</p> <hr> <p id="p4">相关技术文章 <span>8</span> 篇</p> </div> </body> </html>
05-24
``` <!DOCTYPE html> <!--声明文档类型为HTML5--> <html lang="en"> <!--HTML文档的基本结构,lang属性表示使用的语言为英语--> <head> <!--网页头部,包含元数据信息和外部资源引用--> <meta charset="UTF-8"> <!--指定字符编码为UTF-8--> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!--告诉IE浏览器采用最新的渲染方式--> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--设置页面在移动端显示时的视口大小--> <title>Document</title> <!--网页标题--> </head> <style> <!--样式表--> #backg { <!--id选择器,对应下面的div标签--> width: 919px; <!--宽度为919像素--> height: 272px; <!--高度为272像素--> } div img { <!--对应上面的图片,设置其样式--> width: 300px; <!--宽度为300像素--> height: 222px; <!--高度为222像素--> margin-top: 20px; <!--上边距为20像素--> margin-left: 10px; <!--左边距为10像素--> } #h3 { <!--id选择器,对应下面的h3标签--> color: rgb(132, 106, 90); <!--文字颜色为rgb(132, 106, 90)--> font-weight: 600; <!--字体加粗--> font-size: 23px; <!--字体大小为23像素--> margin-top: -224px; <!--设置上边距,将h3标签向上提升224像素--> margin-left: 340px; <!--左边距为340像素--> } #p1 { <!--id选择器,对应下面的p标签--> font-size: 14px; <!--字体大小为14像素--> color: rgb(20, 111, 158); <!--文字颜色为rgb(20, 111, 158)--> font-weight: 550; <!--字体加粗--> margin-top: 13px; <!--上边距为13像素--> margin-left: 340px; <!--左边距为340像素--> } #p2 { <!--id选择器,对应下面的p标签--> width: 575px; <!--宽度为575像素--> font-size: 13.2px; <!--字体大小为13.2像素--> color: black; <!--文字颜色为黑色--> text-indent: 2em; <!--段落首行缩进2个字符--> margin-top: -3px; <!--上边距为-3像素--> margin-left: 340px; <!--左边距为340像素--> } #p2 span { <!--对应上面的span标签,设置其样式--> color: rgb(20, 111, 158); <!--文字颜色为rgb(20, 111, 158)--> font-style: italic; <!--字体样式为斜体--> text-decoration: underline; <!--添加下划线--> } #p3 { <!--id选择器,对应下面的p标签--> font-size: 14px; <!--字体大小为14像素--> color: rgb(20, 111, 158); <!--文字颜色为rgb(20, 111, 158)--> font-weight: 550; <!--字体加粗--> margin-top: 10px; <!--上边距为10像素--> margin-left: 340px; <!--左边距为340像素--> } #p3 span { <!--对应上面的span标签,设置其样式--> color: red; <!--文字颜色为红色--> font-size: 20px; <!--字体大小为20像素--> font-weight: 800; <!--字体加粗--> } hr { <!--水平线--> width: 560px; <!--宽度为560像素--> margin-top: -2px; <!--上边距为-2像素--> margin-left: 340px; <!--左边距为340像素--> } #p4 { <!--id选择器,对应下面的p标签--> color: rgb(132, 106, 90); <!--文字颜色为rgb(132, 106, 90)--> font-weight: 540; <!--字体加粗--> font-size: 23px; <!--字体大小为23像素--> margin-top: 12px; <!--上边距为12像素--> margin-left: 340px; <!--左边距为340像素--> } #p4 span { <!--对应上面的span标签,设置其样式--> color: red; <!--文字颜色为红色--> font-weight: 800; <!--字体加粗--> } </style> <body> <!--网页主体部分--> <div id="backg"> <!--div标签,id为backg,用作背景--> <img src="./img/bk01.png" alt=""> <!--图片,引用地址为./img/bk01.png--> <div id="h3">Web前端开发工程师</div> <!--h3标题,id为h3--> <p id="p1">技术要求:</p> <!--段落,id为p1--> <p id="p2">对常用的一些Js框架了解,如jQuery、YUuI等。掌握最基本的JavaScript计算方法编写。对目前互联网流行的网页制作方法(Web2.0) HTML+CSS,以及各大浏览器兼容性有很大的了解。对前沿技术(HTML5+CSS3)的基本掌握。<span>Web前端技术</span>你究竟掌握了多少...</p> <!--段落,id为p2,包含一个span标签--> <p id="p3">更新时间:2015年05月19日20点(已有<span>325</span>人点赞)</p> <!--段落,id为p3,包含一个span标签--> <hr> <!--水平线--> <p id="p4">相关技术文章 <span>8</span> 篇</p> <!--段落,id为p4,包含一个span标签--> </div> </body> </html> ```
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值