CSS针对IE6实现网页图片底部留出空白的方法
Kayo 发布时间：2016-05-13 12:04:12 作者：Kayo Lee 
我要评论
我要评论又到了对付IE6兼容的时间了,要让img底部留出空白,普通的li写法在IE6下往往会出问题, 下面就关于CSS针对IE6实现网页图片底部留出空白的方法给出一些经验,需要的朋友可以参考下
昨天在优化主题时意外的发现了 IE6 下 img 标签的一个 Bug ，用块级容器包裹 img 标签时，在 IE6 下 img 标签所在容器底部会出现 5px 多余的空白，例如网页中有如下的结构：
XML/HTML Code复制内容到剪贴板
- <ul>
- <li><img src="img-bug.png" alt="img bug" /></li>
- <li><img src="img-bug.png" alt="img bug" /></li>
- <li><img src="img-bug.png" alt="img bug" /></li>
- <li><img src="img-bug.png" alt="img bug" /></li>
- <li><img src="img-bug.png" alt="img bug" /></li>
- </ul>
相应的 CSS：
CSS Code复制内容到剪贴板
- ul {list-style: none; }
- li {display: block; width: 200px; height: 40px; }
在 Chrome 下，会显示如下的正确结果：
PPPPPPPPPPPPPPP1
但在杯具的 IE6 下，会显示如下的情况：
PPPPPPPPPPPPPPPPP2
接下来是如何解决问题了，解决的方案有很多种，这里 Kayo 列举几个比较好的解决方法：
方法一
方法一也是最常用的方法了，就是为 img 标签的父元素添加 overflow: hidden 。
li {overflow: hidden; }
这个方法比较简单，只是父元素必须有指定的 height ，并且需要注意，某些情况下父元素可能需要显示超出自身大小的子元素（如显示绝对定位的超出父元素大小的子元素），这时使用 overflow: hidden 就不那么合适了。
方法二
为 img 标签设置 margin-bottom: -5px
img {margin-bottom: -5px; }
方法三
为 img 标签设置 vertical-align: bottom
img {vertical-align: bottom; }
相关文章
- 首先帮大家区分一些针对IE6的hack写法,看到以后就知道要对付万恶的IE6了--然后来整理针对IE6的一些CSS Hack编写时的注意点小结,需要的朋友可以参考下2016-05-26
- 下面小编就为大家带来一篇浅谈前端制作中，IE6还有必要兼容吗？小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-31
最新评论