3

我似乎无法弄清楚为什么当它包含两个图像时，为什么这个额外的 5px 会出现在我的 div 的底部。当它只包含一个图像时，它不会发生。我已经删除了所有其他标记和 css，但问题仍然存在。它也发生在 Chrome、Firefox 和 IE 上。

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
<head>
    <link rel="stylesheet/less" href="<?php echo THEMES_URI; ?>starter_digital/style.less" type="text/css">
    <script src="<?php echo THEMES_URI; ?>starter_digital/javascript/less-1.3.1.min.js" type="text/javascript"></script>
</head>

<body>
    <div id="social">
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/facebook.png" />
    </div>

    <br />

    <div id="social">
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/twitter.png" />
    </div>

    <br />

    <div id="social">
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/facebook.png" />
        <img src="<?php echo THEMES_URI; ?>starter_digital/images/twitter.png" />
    </div>
</body>
</html>

少/CSS：

#social {
  background-color: red;
}

结果：

Chrome 中的错误图片

4

2 回答 2

6

尝试添加：

#social img { display: block; float: left; margin-right: 5px; }

或者

#social { line-height: 0; }

到你的 CSS。由于 an<img>默认情况下是内联元素，因此它的高度计算方式与默认 line-height 值相关。

这是一个小提琴：http: //jsfiddle.net/5Gs3Q/

在内联元素上，line-height CSS 属性指定用于计算行框高度的高度。

在块级元素上，line-height 指定元素内行框的最小高度。

来源：https ://developer.mozilla.org/en/CSS/line-height

于 2012-12-10T18:54:40.597 回答
0

我相信更改行高可能会解决问题。

#social {
   background-color: red;
   line-height:normal;
}
于 2012-12-10T18:58:57.807 回答