background-imageで指定した画像が表示されない

そのCSSファイルからの相対パスで表記する必要があるので、パスの記述に間違いがないか調べる

<ul><li>で画像リンクを作成したときに IEでフォントサイズを変更すると隙間が出来てしまう

• overflow:hidden;
• font-size:1px; を追加
• line-height プロパティ値をチェック

<td>内のフォントが正しく指定したとおりでない（Win IE Mac IE）

<td>の中に<span>をいれて対応する

Win IEだけずれる時があり、ずれる大きさがフォントサイズによって変わる

ずれる

等に vertical-align を設定する（top 又は bottom）

 

<div>内に配置した<img>が<div>よりサイズが小さいと隙間が出来る

img { display: block; }

floatでレイアウトしたときのボックスの間に隙間が出来る

隙間が出来るボックス要素全てに float 要素を追加

position:absoluteのボックスが消える

• Case1: position:absolute が float と hasLayout をもつ clear の直前に存在する場合
• Case2: position:absolute が float と hasLayout をもつ clear との間に存在する場合
• Case3: position:absolute が width:100% の float の直前に存在する場合。（IE6以下のみ）
• Case4: position:absolute が width:100% の float の直後に存在する場合。（IE6以下のみ）
• http://jmblog.jp/misc/disappearance-of-an-absolute-positioned-box-in-win-ie/index.ja.html

or
絶対配置の要素自体に clear:both を使うことで解決

floatに内包されたコンテンツ、またはfloat要素に接する背景やborderなどが表示されたりされなかったり

リンクや文字や背景やborderが表示されたりされなかったり（ = ピーカブーバグ）

• floatの親要素にline-heightを指定する。
• floatの親要素にwidthまたはheightを指定する。
• バグる要素にposition:relativeを指定する。
• ★バグる要素にzoom:1を指定する。

ブロック要素にinline-blockが効かない

inline-block

横並びメニューやパンくずリストに使用する

display:inline-block;
_display:inline;
_zoom:1;

横方向のmarginが倍になるバグ

• ★該当要素に「display：inline」を追記する。
• 「margin」の代わりに「padding」を使用する。
• IEハックを使ってIE6にだけ「margin」の値を半分に指定する。