给力星

Web Developer

解决Chrome/IE中图片底部多出几像素的问题

美团点评 2018 届校招内推开始啦!
参与内推 = 简历免筛选 + 多一次笔试 + 提前面试/提前拿 Offer
多一次机会,多一份把握,千万不要错过~
内推申请地址:https://wenjuan.meituan.com/survey/68332

遇到了一个问题:网页中的img图片底部会比父层多出几像素,像是设置了padding-bottm/margin-bottom的效果(实际没有)。如下图所示,将父层背景设置为绿色,可以看到底部多出了几像素,Chrome/IE 8均是如此。

图片底部多出几像素图片底部多出几像素

代码如下,就是简单的DIV层中放了一张图片。

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style type="text/css">
        .container {
            background: green;
        }
    </style>
</head>
<body>
    <div class="container">
        <img class="img" src="./girl-smile-01.jpg" />
    </div>
</body>
</html>

这个问题也曾困扰过我几次,不过解决方法很简单,只要设置img图片的样式 display:block; 即可(或者 vertical-align:bottom 也可以解决这问题。这个其实才是核心的解决方法,请看下面补充的基线对齐)。

.img {
    display: block;
}

设置后就不会有这个问题了:

解决Chrome/IE中图片底部多出几像素的问题解决Chrome/IE中图片底部多出几像素的问题

基线对齐

今天重新翻了一下《CSS权威指南》,第三版P145讲到的基线问题,就是导致这个问题的原因:

vertial-align: baseline(默认值)要求一个元素的基线(区别与底端)与其父元素的基线对齐。如果一个垂直元素没有基线,比如是一个图像、表单输入元素、其他替换元素,则该元素的底部与其父元素的基线对齐。这个对齐规则使一些Web浏览器总是把替换元素放在基线上,即使该行中没有其他文本。例如,假设一个表单元格中只有一个图像,这个图像可能实际在基线上,不过在某些浏览器中,基线下面的空间会导致图像下出现一段空白

CSS Reset

可以使用 CSS Reset,这样也可以避免一些莫名其妙的坑。

发表评论

电子邮件地址不会被公开。