CSS怎么实现网页图片底部留出空白
本篇内容主要讲解“CSS怎么实现网页图片底部留出空白”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS怎么实现网页图片底部留出空白”吧!
创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站制作、网站设计、外贸网站建设、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的丰宁网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
昨天在优化主题时意外的发现了 IE6 下 img 标签的一个 Bug ,用块级容器包裹 img 标签时,在 IE6 下 img 标签所在容器底部会出现 5px 多余的空白,例如网页中有如下的结构:
XML/HTML Code复制内容到剪贴板
相应的 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; }
到此,相信大家对“CSS怎么实现网页图片底部留出空白”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
本文名称:CSS怎么实现网页图片底部留出空白
文章源于:http://pwwzsj.com/article/jgdges.html