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

7

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

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

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

上图的代码如下：

<!doctype html>
<html>

<head>
    <meta charset="gbk" />
    <title>HTML5图片元素显示测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: #3c3c3c;
        }

        #box {
            width: 400px;
            margin: 8% auto 0;
            background: blue;
            border: 3px solid #fff;
        }
    </style>
</head>

<body>
    <div id="wrapper">
        <img src="Penguins.jpg" alt="" />
    </div>
</body>

</html>

这个问题其实和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
本文链接：https://blog.yiguochen.com/html5-img-bug.html
如需转载请以链接形式注明原载或原文地址。

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

© 2018 雨夜带刀
Powered by WordPress