首页 > 代码库 > IE8下图片无法显示问题

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,同理其他格式类型不可用也是同样道理 。

 

IE8下图片无法显示问题