Strictにした時の画像下のスキマを埋める
今回は前回と違って、ちょっとまじめにWEBの話を。
Movable Type はデフォルトでは 「XML宣言なし・XHTML1.0のTransitional」 になっているけれど、これをより厳格な 「XML宣言あり・XHTML1.0のStrict」 にしてみました。
それでやっぱり問題になってくることがブラウザ問題。
自分がメインで使ってるのはFirefoxなんだけど、現時点でシェアトップのIE6.0は確認必須になってくる。
XML宣言することによって、IEでは後方互換モードにスイッチが入ってしまい、ボックスの解釈が変わってしまうことはよく知られている。
ただ、chocobitではWin5.0や5.5にCSSハックをかけているので、スターハックでそれらと同じ扱いにすれば問題はないし、同じボックス内で「widthプロパティとpadding・borderプロパティの併用」をなるべく避ければよい。
今回気になったのはFirefox側で、Transitional ⇒ Strict にしたことで、imgタグで画像を置いたとき、その下に 微妙な隙間 ができてしまうこと。
ほんの数ピクセルなんで、気にならない人は多いとは思うんですが、WEBデザイナー（見習い）としては見逃せない！何か対策は？
で、実際どんな感じなのか、サンプルページ作ってみましたんで。（別小窓で開きます）
対策前 ⇒ Transitional （元々スキマなし） / Strict （スキマできる）
お使いのブラウザではどうでしたか？
Firefoxは、Transitionalの時は隙間ないのですが、Strictにするとできるんです。
最近のバージョンのOperaやNetscapeでも同様なので、これは標準仕様なのでしょう。
IEでは試した5.0～6.0でTransitional・Strict共に隙間はできません。
この隙間を消そうと調べていると、色々と対策があるようですが、一番シンプルなのがこれ。
img { vertical-align: bottom; }
これをスタイルシートに入れるだけで隙間がなくなるんです。
対策後 ⇒ Transitional （元々スキマなし） / Strict （スキマ解決）
いやー、実に簡単。（↑ Transitionalの場合は別に対策必要ないんですが、分かり易いように）
知ってる人からすれば今更な事なんでしょうが、これを知るまでは「imgをdivで囲って高さを指定して」などと面倒くさいことをしておりました...。
こんな対策をほどこしていながら、このサイトではいまだ画像を貼り付けておりません...。
（サンプルページ以外←ちなみに携帯で撮影）
ので、近々デジカメ買う！そして使う！
と思う。
Message
Trackbacks (0)
- TrackBack URL
Comments (6)
さんきゅーーーーーーーーー！！！！！！！おみごと！
ど！どうもですーーー！
いつもこのちょびっとの隙間に悩まされていました。すっきりしましたーっ！ありがとう
Webサイト作ってると、1ピクセルの隙間も追求したくなりますからね。お役に立ててなによりです。
ありがとーーーーーー！！！
どもーーー！！！
何この流れーーー！！！