Question

以下是重现问题的HTML代码：

<!DOCTYPE html>
<html>
    <body>
        <div style="width:800px; margin:0 auto;">
            <img src="logo.gif" width="100" height="40" />
        </div>
    </body>
</html>

当它在桌面浏览器中呈现时，唯一的<div>的高度变为45像素，但不是我预期的40（在IE11和Opera Next v20中测试过）。 logo.gif是100x40，即使我通过CSS将零边框应用于<img>标签（边框，边框宽度等），情况仍然相同。

为什么会发生以及如何解决？

Answer 1

我认为这不是一个错误，因为它在所有主流浏览器中以相同的方式呈现。如果我们只设置display:block样式，问题就解决了。如果没有这个，图像将呈现为内嵌元素，其底部边框与所谓的文本基线对齐。

让我们改变我们的代码来证明这一点：

<!DOCTYPE html>
<html>
<body style="background-color: #FFFF99;">
<div style="width:800px; margin:0 auto; background-color: #00CCFF;">
<img src="logo.gif" width="100" height="40" style="border: 3px solid black;" />
Some text yyy qqq
</div>
</body>
</html>

结果如下：

enter image description here

正如您所看到的，渲染文本时需要额外的空间而不剪裁！

我在Eric Meyer CSS: The Definitive Guide的着名书籍中找到了对此的确认 - 在专门用于对齐的部分中，它描述了{vertical-align: baseline}标记的<img>属性。以下是相应的摘录：

此对齐规则很重要，因为它会导致某些Web浏览器始终将替换元素的底边放在基线上，即使该行中没有其他文本也是如此。例如，假设您自己在表格单元格中有一个图像。图像实际上可能位于基线上，但在某些浏览器中，基线下方的空间会导致图像下方出现间隙。其他浏览器将使用表格单元“收缩包装”图像，并且不会出现间隙。尽管CSS工作组缺乏对大多数作者的吸引力，但差距行为是正确的。

Answer 2

FireFox，IE和Chrome中的问题相同。

您可以通过黑客修复此问题并在您的div中添加Height:40px;（我必须使用与您的徽标具有相同宽度/高度的图像，所以不要惊讶于我有不同的图片）

<div style="width:800px; margin:0 auto;border:solid;height:40px;">
    <img src="http://a2.mzstatic.com/us/r30/Video/16/96/5f/mzi.rxlappss.100x100-75.jpg" width="100" height="40" />
</div>

或者，为您的图片代码添加一些CSS并保持原始代码不变（会影响所有可能不合适的图片）

img {padding:none;margin:none;display:block;}

http://jsfiddle.net/h6wrA/

或者，您只能对http://jsfiddle.net/h6wrA/2/

的某些图片执行此操作

Answer 3

我发现没有高度攻击等正确解决这个问题的唯一方法是将容器设置为line-height：0; （见下面的演示示例）。

＆＃13;

.image { background:red; }
.image-fix { line-height:0; }

＆＃13;

Image without Fix: 
<div class="image">
  <img src="http://via.placeholder.com/100x100" alt="">
</div>

<br>

Image with Fix: 
<div class="image image-fix">
  <img src="http://via.placeholder.com/100x100" alt="">
</div>

＆＃13;

Answer 4

这不是问题，你只需要编写一个正确的CSS。试试

高度：40像素;显示：块;对于div标签并保持边距：0，填充：0 多数民众赞成......

<div> with image的高度比预期的高</div>

4 个答案: