• このエントリーをはてなブックマークに追加

たまには、文字と文字の間にスペースを入れて読みやすくするために、「letter-spacing」を入れると思います。そういう時に出くわしちゃった問題がありました。

XHTML/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" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-script-type" content="text/javascript" />
<title>サンプル</title>
</head>
<body>
<div id="container">
<div class="content left">
1段目(左)
</div>
<div class="content right">
1段目(右)
</div>
<br class="clear" />

<div class="content left">
2段目(左)
</div>
<div class="content right">
2段目(右)
</div>
<br class="clear" />

<div class="content left">
3段目(左)
</div>
<div class="content right">
3段目(右)
</div>
<br class="clear" />
</div>
</body>
</html>

CSS

#container{
background:#f99;
width:400px;
font-size:12px;
letter-spacing:10px;
}

#container .content{
margin-bottom:10px;
width:200px;
height:100px;
}

#container .left{
float:left;
}

#container .right{
float:right;
}

.clear{
clear:both;
}

という具合にコーディングし、IE6で確認すると2段目が表示されなくなりました。(他のブラウザでは問題ない。)
これは、#containerにletter-spacingがかかっているために起こってしまったIE6特有のバグらしいです。このケースだと、letter-spacingが#containerにかかっているため、br.clearにも継承されています。で、br.clearにletter-spacingが入るなんていうのは問題なさそうな感じなんですが、これを入れてしまうとまず<br />が連続した場合に1つとして認識されてしまいます(<br />を連続するコーディングはNGなんですが)。

このケースの場合、自分では(実は)わかってないところが多いのですが、連続していなくても<br />に何かが働いて、<br />が無いとかいうような解釈をしてしまうようです。

上記のケースの場合、解決するにはletter-spacingの値を0にすればいい。こんな感じで。

br.clear{
letter-spacing:0;
}