IE8下图片无法显示问题

一、背景图片不能显示的原因

代码:

background:url(img/img1.jpg)no-repeat;
background:url(img/img1.jpg) no-repeat;

第一个背景图片IE8下不会显示,第二行代码的背景图片会显示,区别在于no-repeat前面的空格,IE8对空格的敏感度很高。

二、在HTML中插入图片不能显示

HTML

1 <div class="img">
2     <a href=‘javascript:‘>
3         <img src="img/img1.jpg" alt="img">
4     </a>
5 </div>

CSS:

.img{
    width:200px;
    height:200px
}

.img a{
    display:inline-block;
    /*
    width:200px;
    height:200px;
    */
}

.img a img{
    width:200px;
    height:200px;
}

如果不给img标签的父元素a设置宽高的话,img在IE8下是无法显示的,因为a标签是无法继承div的宽高的(行内元素和行内块元素无法继承父元素的宽高,而块元素可以); 
解决方法就是:设置a标签的宽高或者设置a为块元素(display:block);

自己这些天在做项目的时候,就遇到了img标签无法显示的问题,这就尴尬了,下面一起来看下源代码:

HTML代码:

在浏览器中显示如下:

试过了上面的第二种方法,发现还是无法改善。

在IE下,我们发现一个问题:

解决方案:

重新保存图片为png格式即可,不一定是png,同理其他格式类型不可用也是同样道理 。

时间: 2024-08-10 21:22:33

IE8下图片无法显示问题的相关文章

在IE8下background-image不显示的解决方法

刚写一个页面,在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来. 调试N遍后,只好上stackoverflow去找一下,果然找到了. 最初是这样写的: background: url(../images/img.png)no-repeat; 在ie8下不显示,改成如下: background: url(../images/img.png) no-repeat; 可以显示了. 看出差别了吗?没有错,一个空格.仅一个空格而已.

IOS下图片不能显示问题的解决办法

最近遇到这样一个问题,在HTML5手机页面中,直接给<img>标签设置宽高,即便图片路径正常,在IOS真机下也是无法显示的,而在安卓以及浏览器的模拟真机上都是正常显示的,这是为什么呢? html: <img src="xxxx.png" /> //假定图片路径正常 css: img{ width:100px; height:100px; } 这样,图片在安卓以及模拟真机上是能够正常显示的,而在IOS手机下无法正常显示. 有人提供给我一个解决办法,给img标签加一

HighCharts 在IE8下饼图不显示的问题

HighCharts饼图用来做数据统计时,在IE8下发现某些图形不能正确显示出来. 在IE8下面会报  'this.renderer.gradients' 为空或不是对象 这样的错误.. 解决方法: (1)打开highcharts.js (2)  ctrl+f 查找 var b=this.renderer.gradients[this.element.gradient]; 替换为: try { var b = this.renderer.gradients[this.element.gradie

qrc资源文件加载后,裸机环境下图片不显示

问题描述:在qt开发环境下,使用qss进行界面美化工作,里面包含许多图片资源.最后项目决定把这些图片资源和代码一起打包.然后就把图片资源和qss文件一起编入qrc文件中进行编译.在本机开发环境下是没有任何显示的问题的,但是在裸机环境下就出现了图片显示不正常,而色彩显示正常的问题. 问题分析:通过把图片资源嵌入到qrc文件中,Qt的rcc.exe会根据qrc文件生成moc文件.当程序运行中,这些图片就加载到内存中.需要使用这些图片资源时可以直接读取,而不需要通过IO方式去读取磁盘的资源,可以提高反

html ie8下数据不显示,显示不正常,F12启动调试后正常

程序正常启动运行,界面数据显示不出来,按F12调试后立马正常,网上查原因: IE8 与IE9 的console对象只有在打开了bug窗口之后才会被创建.之后的版本才解决了这个问题.删除了console好了 ,注释掉也可以

ie8浏览器 图片本身问题导致 无法显示图片--- 诡异现象的排查分享

引子:   前段时间 做新版2.0 首页 的时候, 总感觉 新版首页 线上 精彩回顾下的 2张图片颜色怪怪的,当时以为是图片压缩太厉害导致的,由于实在太忙就没太在意!以下 是来自线上 截图:  红色方框 我认为  那2张 怪怪的 图片,大家感受下颜色是否不一样!   问题描述:        今天,测试同学找到我,说新版首页 精彩回顾下方 2张图片 在 ie8下 图片展现不出来了!   开始排查:  通过 浏览器 查看图片 DOM结构, 代码如下:  <img data-original="

a 标签背景图在ie8下不显示问题

上图中对a标签设置了 background 背景图片,但是ie8浏览器下图片没有显示,background:url(../images/fast_buy_ticket.gif)no-repeat; 这个代码下面出现了红色的波浪线. 将background:url(../images/fast_buy_ticket.gif)no-repeat;修改一下 为background:url(../images/fast_buy_ticket.gif) no-repeat;后 background 下面的

a标签的背景图在ie8下显示问题

今天遇到个小问题,纠结了很久,分享下 a标签添加背景图,需要给a添加display:block样式 但是在ie8下还是不能显示背景图,开始以为是由于a标签为空造成的,试了下添加内容也没用,后来注意到一点细节,修改后就能正常显示了 修改前: background: url('./img/active/legendBg.png')no-repeat 修改后: background: url('./img/active/legendBg.png') no-repeat 注意到了么,就是因为那个空格..

jsp页面在IE8下文本模式自动为“杂项(Quirks)”导致页面显示错位

最近在修改网站的响应式的页面时,由于都是套样式页面,修改过程都是粘贴复制,导致了一些细节问题在IE8下暴露出来: 遇到的问题就是在在Chrome,火狐页面都正常,唯独在IE8下页面样式显示乱样了,但是本地就显示正常,Tomcat缓存也清楚了,再加上自己也是个小白,周末平静了一天半终于找到问题的源头了,其实解决办法也很简单,如图: 我最初是将小脚本写在<!DOCTYPE html>文档都上方的,但是在IE8浏览文本模式默认就编程了“Quirks”模式,显示不正常,后来改成了写在文档头下方就可以正