原付生活(3)
IEのCSSバグについて考える
先日の続き。
IE5とかIE5.5にはCSSの解釈に一部バグがあります。
ちょっと試しに。
箱があります。
そして、ヘッダがあります。
これは、最終的に望む姿。
ヘッダは<h2>、箱は<div>。
H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
}
DIV
{
border: 1px solid #36e;
padding: 5px;
margin: 8px 0;
}
というスタイル。
これをIE5で見ると
なんか変。
１：ヘッダがきつきつ。
２：ヘッダと箱の隙間。
２は古くからある「Box Hack」という手法で
DIV
{
border: 1px solid #36e;
padding: 5px;
margin: 0;
voice-family: "\"}\"";
voice-family: inherit;
margin: 8px 0;
}
とすることで解決。
で、問題は１だ。
これも根本原因は
<h2>要素をインラインにしてるから
ってことなんですが。
(これは「バグ」ではないらしい。「非対応」ということ)
ブロック要素にすると、こんな感じ。
やっぱり隙間が開いちゃう。
マージンを0にする。
おかしくはないけどさ。
<h2>を<div>に入れてみる。
おかしくはないけどさ。
イメージ(=望む最終形)とは、ちと違う。
インライン要素であっても、width指定すると
パディングとかマージンとか現れるらしい。
ということで、widthを指定してみる。
H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
width: 0;
}
予想通り。
なので、改行するなってことか。
H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
width: 0;
word-break: keep-all;
}
これです。求めていたのは。
で、これをIE6で見ると
なので、「Box Hack」と同じ手法で、
IE5以外なら
width:auto
word-break:normal
としちゃう。
H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
width: 0;
word-break: keep-all;
voice-family: "\"}\"";
voice-family: inherit;
width: auto;
word-break: normal;
}
まあこんな感じでしょう。
IEの5と6、Opera7.5と9.02、Netscapeの6.1と8.1で確認。
Netscapeの8.1だと、微妙に隙間できてるけど、
もうめんどくさい(笑)
でもさ、word-breakって大丈夫かなあ。
単語の切れ目でしょ？半角数字とか英文字とかが混ざったヘッダだったら
改行されちゃったりしない？
white-spaceとかword-wrapだとIE5は効いてくれないし。
<nobr>って使えたっけか？
IE5とかIE5.5にはCSSの解釈に一部バグがあります。
ちょっと試しに。
箱があります。
そして、ヘッダがあります。
これは、最終的に望む姿。
ヘッダは<h2>、箱は<div>。
H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
}
DIV
{
border: 1px solid #36e;
padding: 5px;
margin: 8px 0;
}
というスタイル。
これをIE5で見ると
なんか変。
１：ヘッダがきつきつ。
２：ヘッダと箱の隙間。
２は古くからある「Box Hack」という手法で
DIV
{
border: 1px solid #36e;
padding: 5px;
margin: 0;
voice-family: "\"}\"";
voice-family: inherit;
margin: 8px 0;
}
とすることで解決。
で、問題は１だ。
これも根本原因は
<h2>要素をインラインにしてるから
ってことなんですが。
(これは「バグ」ではないらしい。「非対応」ということ)
ブロック要素にすると、こんな感じ。
やっぱり隙間が開いちゃう。
マージンを0にする。
おかしくはないけどさ。
<h2>を<div>に入れてみる。
おかしくはないけどさ。
イメージ(=望む最終形)とは、ちと違う。
インライン要素であっても、width指定すると
パディングとかマージンとか現れるらしい。
ということで、widthを指定してみる。
H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
width: 0;
}
予想通り。
なので、改行するなってことか。
H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
width: 0;
word-break: keep-all;
}
これです。求めていたのは。
で、これをIE6で見ると
なので、「Box Hack」と同じ手法で、
IE5以外なら
width:auto
word-break:normal
としちゃう。
H2
{
background-color: #36e;
color: #fff;
padding: 8px;
font-size: medium;
font-weight: bold;
display: inline;
width: 0;
word-break: keep-all;
voice-family: "\"}\"";
voice-family: inherit;
width: auto;
word-break: normal;
}
まあこんな感じでしょう。
IEの5と6、Opera7.5と9.02、Netscapeの6.1と8.1で確認。
Netscapeの8.1だと、微妙に隙間できてるけど、
もうめんどくさい(笑)
でもさ、word-breakって大丈夫かなあ。
単語の切れ目でしょ？半角数字とか英文字とかが混ざったヘッダだったら
改行されちゃったりしない？
white-spaceとかword-wrapだとIE5は効いてくれないし。
<nobr>って使えたっけか？
[コメント読む(0)]
