DDR爱好者之家

CSS针对IE6实现网页图片底部留出空白的方法
站长资源 2024/5/3 佚名
42 1538
DDR爱好者之家 Design By 杰米

昨天在优化主题时意外的发现了 IE6 下 img 标签的一个 Bug ，用块级容器包裹 img 标签时，在 IE6 下 img 标签所在容器底部会出现 5px 多余的空白，例如网页中有如下的结构：

XML/HTML Code复制内容到剪贴板
  1. <ul>  
  2.     <li><img src="img-bug.png" alt="img bug" /></li>  
  3.     <li><img src="img-bug.png" alt="img bug" /></li>  
  4.     <li><img src="img-bug.png" alt="img bug" /></li>  
  5.     <li><img src="img-bug.png" alt="img bug" /></li>  
  6.     <li><img src="img-bug.png" alt="img bug" /></li>  
  7. </ul>  

相应的 CSS：

CSS Code复制内容到剪贴板
  1. ul {list-style: none; }   
  2. 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; }

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米