3

2 つの画像が含まれているときに、この余分な 5px が div の下部に表示される理由がわかりません。画像が 1 つしか含まれていない場合は発生しません。他のすべてのマークアップと 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に。はデフォルトでインライン要素であるため、<img>その高さはデフォルトの line-height 値に関連して異なる方法で計算されます。

ここにフィドルがあります：http://jsfiddle.net/5Gs3Q/

インライン要素では、CSS の line-height プロパティは、行ボックスの高さの計算に使用される高さを指定します。

ブロック レベルの要素では、line-height は、要素内の行ボックスの最小の高さを指定します。

ソース: https://developer.mozilla.org/en/CSS/line-height

于 2012-12-10T18:54:40.597 に答える
0

line-height を変更すると問題が解決する可能性があると思います。

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