IE8 bug—使用max-width属性导致图片消失

来源:互联网 发布:淘宝都没流量 编辑:程序博客网 时间:2024/06/04 18:43

bug症状:

在一些设计中给img设置max-width: 100%,以便图片能完整呈现,而不是被截掉部分。这样设置在其他浏览器下都表现完美,但唯独IE8下却出了问题。
IE8下,图片竟然不见了!

bug重现:

大家所知的一般常见的IE bug中没见过这样情况的,所以花费了一些时间来重现这个问题,max-width的设置只是导致这个现象的部分条件。
在做了一系列试验后得出了问题重现的条件。
首先给img设置max-width,但却没有明确给出width数值,并且给img标签设置width属性(不是通过css设置的width),并且img的父容器设置了浮动,IE8下查看img的width为0!表现为IE8(标准模式下)下图片消失了!

如何修复这个bug?

有三种方法:

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

最好的办法第三方案:通过设置CSS,给浮动元素中的没有明确设置width的img设置width:auto;或max-width: none;
来看个demo:

  • 点此查看demo

其中有三个logo。在IE8下,第一个logo将消失;第二个通过CSS给img设置了width:auto;第三个在img标签上没有设置width属性。
一个神奇的bug!!!!

文章翻译自Using max-width on images can make them disappear in IE8


原创粉丝点击