ここでバナナを食べます。ページ内のすべての画像の下にギャップがあり、コードにマージンがありません。 Firebugでさえそれを見ることができませんが、FirefoxとSafariはそれをレンダリングしています-CSSがなくてもAT ALL!
これまで私に起こったことはありません...!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Paranoid</title>
<link rel="stylesheet" href="includes/style.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="sidebar">
<img src="images/logo.png" id="logo" />
<ul id="menu">
<li class="menu1">Main</li>
<li class="menu1">System</li>
<li class="menu1">View</li>
<li class="menu1">Policy</li>
</ul>
<div id="sidebar_bottom"></div>
</div>
<div id="main_content"></div>
<div class="clear"></div>
</div>
</body>
</html>
body{
background: #497e9f url(../images/bg.png) repeat-x top;
}
#container{
width:864px;
margin: 8px auto 0 auto;
}
#sidebar{
/*width:139px;*/
float: left;
}
#sidebar_bottom{
height:10px;
background: url(../images/sidebar_bottom_bg.png) bottom left no-repeat;
}
#sidebar #logo{
margin-bottom: 2px;
}
#sidebar #menu{
background: #f2f2f2;
border: 0 1px solid #cecece;
margin: 0;
list-style: none;
}
これは実際にはそれほど珍しいことではありません。これは、画像がインライン要素であるため、テキストのベースラインに配置される画像の下部とテキスト行の下部の間にスペースがあるためです。
これに対する最も簡単な解決策は、単にdisplay:block;
を使用して画像をブロック要素に変換することです。 float:left;
またはfloat:right;
を使用して画像をフローティングすると、画像がブロック要素に変換されるため、画像も機能します。
vertical-align
、font-size
、line-height
などのプロパティを調整することも距離に影響を与える可能性がありますが、実際には効果が除去されないほど堅牢ではありません。状況によってはまだ表示される場合があります。
関連する質問:
XHTML 1.0 Strictの画像の下の不要な間隔
画像に余分な間隔があるのはなぜですか?
IE画像間隔の問題
3年後にこの質問に答えて申し訳ありませんが、このページは最初のグーグルページにあり、私は責任を感じます.....答え:追加するだけです "vertical-align:top;"からimgタグ内aタグ。
私のために
font-size: 0;
line-height: 0;
ラッピングコンテナでトリックを行いました。
DOCTYPEセクションを次のように変更してみてください。
<!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">
これを確認することもできます: http://www.emailonacid.com/blog/details/C18/12_fixes_for_the_image_spacing_in_html_emails