IE8标准模式下图片max-width的bug

文章目录

bug的发现

在IE9下面,打开开发者工具,切换IE8模式下,发现一些图片看不见了。本来之前也有遇到这个问题,不过没有注意,因为是自己的代码问题,今天搜索了一下,发现这个问题是一个Bug来的。

bug产生的原因

  1. 图片通过css设置了max-width:100%
  2. 图片设置了width属性,且不等于auto的值,或者css中设置了width,且不等于auto。
  3. 图片的父级元素设置了float,且没有设置宽度

如果满足以上条件,在IE8(标准模式)中,图片宽度为0,不会在浏览器中显示。

bug的解决思路

  1. 通过css,给浮动元素明确的width值
  2. 删除img标签的width属性
  3. 通过css,给出问题的img明确声明width:auto或max-width:none

修改以上任意一种方法,都可以解决这个bug,建议根据具体情况来解决,IE8 css hack:.selector { property: value9; }

演示

 

「五年博客,如果觉得我的文章对您有用,请帮助本站成长」

订阅周报 关注微博

原创文章:IE8标准模式下图片max-width的bug ,未经许可,禁止转载,©版权所有
原文出处:前端开发博客 (http://caibaojian.com/ie8-maxwidth-bug.html)

发表评论

请登录后发表评论:

“IE8标准模式下图片max-width的bug”有2个评论

  1. 前端博客

    第二次遇到这个bug了,做自适应的设计里面常常会遇到需要浮动元素,然后图片设置了高度和宽度的。且外边框没有设置宽度的。记住了。

    登录回复