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

■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のレンダリングモードによるのでまずそれをチェックすること)


参考サイトはコチラ
スポンサーサイト

トラックバック

コメント

コメントを残す

Secret


プロフィール

U2K

Author:U2K
いろいろプログラムに関しての覚え書きをちょくちょくと書いていきます。

オススメ










オススメ

忍者AdMax

u2k on Twitter

最近の記事