制作ノウハウ:ブラウザ別

WEB戦略

CSS & HTML

2011.11.23

制作ノウハウ:ブラウザ別

/*------------------------------------------
IE8とIE7・IE6の初期値の問題
------------------------------------------*/
*********************************
・IE8だとdt ddの初期値がIE7やIE6と違うため、はじめにdisplay:inline;で初期値を統一してからmargin等を修正する

・IE8だとol liの初期値をdisplay:inline;では統一できないため以下のように記述して初期化したあとpadding-leftの値を大きくして調整する
 padding-left:1em;
 margin-left:1em;
*********************************


/*------------------------------------------
IE7・IE6の強制的に行うハックの方法
------------------------------------------*/
IE7のみにcssを適用したい場合は以下を記述

/*IE7のハック*/
*+html

IE6のみにcssを適用したい場合は以下を記述

* html


/*------------------------------------------
IE8の問題
------------------------------------------*/
IE8でフッター上の「このページのTOPに戻る」からメインまでのマージンにIE7・IE6との誤差が出てしまう場合以下を設定する
 clear:both;がuptop-containerに設定されていない場合起こりやすいので設定する

IE8でクリアフィックスを指定しないとズレることがある
(たいてい上下にもぐりこんで隠れてしまう状態になる一つの残らず指定の確認をする)

IE8でmin-heightを複数指定しているとズレることがあるので必要な箇所のみ指定するように心がける


/*------------------------------------------
IE7・IE6の問題
------------------------------------------*/
IE6/IE7はdisplayinlinが入っていると端がIE8と同じ位置にならない
(スペース1個分ズレる)


IE7・IE6の最低の高さを取る方法にmin-heightというのがある
(win-heightとなっている所があるが間違いなので訂正する)

IE6でp要素に余分なマージンが入ってしまう場合display:inlineでインライン要素に変更し前後のブロックで位置を調整するしかない
(ポコカサーチでやった)

IE6のバグは以下の関係を理解していると回避しやすい
「min-height」や「min-width」はIE6では使えないので「height」や「width」も必ず記述する。
「float」で崩れるときは、「display:inline;」を追加すると回避できる場合がある。
「margin」が相殺されるときは、「display:inline;」を追加すると回避できる。
「position:relative;」は、「zoom:1;」を追加しておくと回避できる。
ネガティブマージンは、「position:relative; zoom:1;」を追加しておくと回避できる。
「overflow:hidden;」は、「zoom:1;」を追加しておくと回避できる。

IE7でaのアンカーがうまくマウスオーバーしない場合文字飛ばしにspanが入っているのが原因


::::::::::::::::::::::::::::::::::
グローバルメニュー等で使用する書き方
/*ここで幅と高さを指定*/
ul#mainmenu li{
    width:131px;
    float:left;
    height:46px;
}
/*aには高さを指定できる(厳密には文字飛ばしであれば幅も指定できる)*/
ul#mainmenu li a{
    height:46px;
}

/*ここで始めにli#mainmenu01,を記述しているのはIE6のバグを回避するためである*/
li#mainmenu01,li#mainmenu01 a{background:url(../images/mainmenu.gif) no-repeat 0px 0px;}
::::::::::::::::::::::::::::::::::

IE6でプルダウンがズレる時は記述をシンプルにしてみるとうまくいく

このエントリーをはてなブックマークに追加

Page_Up