雨夜带刀's Blog

解决HTML5中图片元素多出来的3.5px

现在使用HTML5的简短的Doctype声明已经成了一种流行趋势:,这个HTML5的声明支持Firefox、Chrome等现代浏览器和IE6/7/8等浏览器,这个已经在本博的另一篇文章22个HTML5的初级技巧中有讲解过。

本博也在前不久也把原来的XHTML的Doctype声明换成了HTML5的Doctype声明,换过之后才发觉一个问题,所有网页上显示的图片(背景图片除外)都会在图片的下方多出3.5px,如下图所示:

HTML5中图片元素多出来的3.5px

上图的代码如下:





HTML5图片元素显示测试




这个问题其实和IE6在XHTML中的图片显示效果一样,那么该如果解决这个问题呢?先来试试下面这种解决办法:

#box img{display:block;}

把图片的显示样式设置成块级display:blcok,多出的3.5px消失了,这个方法还过得去,再看看下面的方法。

#box{width:400px;margin:8% auto 0; background:blue;border:3px solid #fff;overflow:hidden;}
#box img{float:left;}

设置图片浮动,并在图片的父级元素中清除浮动,同样可以去除这个多出来的3.5px,但是这个方法不大好,如果图片后面还有文字或者其他元素也会跟着受影响。

#box{width:400px;margin:8% auto 0; background:blue;border:3px solid #fff;overflow:hidden;}
#box{width:400px;margin:8% auto 0; background:blue;border:3px solid #fff;font-size:0;}

父级元素设置其字体大小为0,Firefox、IE6/7/8都可以去除这个3.5px,但是Chrome并不支持这种方法,并且如果父级元素内部有文字的话那也肯定显示不出来。

img{vertical-align:bottom;}

给图标标签添加一个全局样式vertical-align:bottom,也可以去除这个3.5px,并且也不存在上面的方法的兼容问题,对其他元素也没有影响,这个应该是最完美的解决办法了。vertical-align:bottom 这个属性的意思就是:将支持 valign 特性的对象的内容与对象底端对齐,使用此方法,同样可以解决IE6在XHTML中的图片显示效果。

原载于:雨夜带刀’s Blog
本文链接:http://stylechen.com/html5-img-bug.html
如需转载请以链接形式注明原载或原文地址。
zp8497586rq

“解决HTML5中图片元素多出来的3.5px”目前已有 7 条评论

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。