WEB制作(html・css(スタイルシート))に関する各種メモ書き

CSSレイアウト時のよくやる失敗と対処法

windows ie 全盛の時のtipsですが残しておきます。

■ floatでレイアウトしたときのボックスの間に隙間が出来る
→隙間が出来るボックス要素全てに float 要素を追加

■ <div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る
→ 下記を追加
 img { display: block; }

■ Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる
→ずれる<div>等に vertical-align を設定する(top 又は bottom)

■ <td>内のフォントが正しく指定したとおりでない(Win IE  Mac IE)
→<td>の中に<span>をいれて対応する

■ MacIEで<div>を floatさせると表示が崩れる。
→ フロートさせるdiv の width height 属性を指定する 

■ <ul><li>で画像リンクを作成したときに WinIEでフォントサイズを変更すると
隙間が出来てしまう
→ overflow:hidden;
font-size:1px; を追加
line-height プロパティ値をチェック

■ background-imageで指定した画像が表示されない
外部CSSに記述している場合、そのCSSファイルからの相対パスで表記する必要があるので、パスの記述に間違いがないか調べる

■ Windows版 IE 6 で 高さ 1px の div が作成できない。(10pxくらいのdivになってしまう)
→height:1px; overflow:hidden;
と記述する。

■ Windows版 IE 6 で float 時の margin が 2倍に解釈されてしまう。
→display: inline; を加える
(CSS2 の仕様では「float を指定した要素は display の指定を無視する」のでほかのブラウザでもOK)
float: left; display: inline; を1セットと覚えておくと楽。

■ Windows版 IE 7 でcssのみでブロック要素をセンタリングできない。
→ センタリングしたい要素に margin:0 auto;
→ 親要素に     text-align: center;
(厳密にはIEのレンダリングモードによるのでまずそれをチェックすること)

関連エントリー

No.157
05/08 16:50

edit

css