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
- IE8 bug—使用max-width属性导致图片消失
- ie8中图片设置max-width属性满足一定的条件会导致消失
- IE8 BUG WITH MAX-WIDTH AND OVERFLOW
- 【ie8bug】img设置max-width:100%,外层浮动,图片消失
- CSS max-width 属性
- IE和firefox max-width 属性兼容性问题
- max-width
- max-width
- Max-width
- width和max-width
- CSS中最大宽度属性max-width和最小宽度属性min-width
- 解决ie6不支持min/max-width/height属性办法
- 让IE6支持max/min-height/width样式属性方法
- IE8 margin-top属性bug解决方案
- [CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法
- [CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法
- [CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法
- [CSS] 详细解释 @media 属性与 (max-width:) and (min-width) 之间的关系及用法
- .net IOC模式(转自http://book.51cto.com/art/200803/67575.htm)
- Proxy源代码分析--谈谈如何学习linux网络编程
- Eclipse插件_JSEclipse下载与安装
- 第十七周实验报告1
- 快捷进入开发状态,这里很简单~
- IE8 bug—使用max-width属性导致图片消失
- flex基本通信方式比较及BlazeDS和LCDS比较
- mongodb 配置还有主从复制
- Linux下Qt安装之qt-x11-opensource-src-4.3.2的安装与配置
- js获取当前日期的前一天、一月、一年的日期 明天、后天
- 博客介绍
- 字节序与位序
- ibatis配置文件示例
- linux的常用时间函数