IEでpaddingがwidthに追加される場合とされない場合
ちょいと画面を作る機会があってmixiのプロフィール変更ページみたいなレイアウトを作ることになって、とりあえずcssをそのまま適応みたものの、作ってるページ側IE7にて表示した時にだけpaddingがwidthにされないくてなんでか上手くかない。。。
↓やりたいこと(paddingがwidthに追加されている)
↓なんでかずれる(paddingがwidthに追加されない)
簡単な現象解説
以下のようなツリー構造になっている。
- ul
- li
- dl
- dt
- dd
- dl
- li
全体の横幅の指定は上位の「bodyMainArea」にて行われており、表の部分はdtとddの横幅を指定がされている。この部分のpaddingがwidthに追加されない現象がおきている。
この部分は以下のようなコードにて構成されている。
htmlソース
<div id="bodyMainArea"> ・・・・ <div id="editList01"> ・・・・ <ul class="editContents"> <li> <dl> <dt>メールアドレス</dt> <dd><input size="30" value="" name="email1"><ul class="editNote"> <li>※メールアドレスは公開されません。変更がある場合のみ入力してください。</li> <li>※携帯アドレスに変更する場合、ドメイン指定受信を設定されている方は「mixi.jp」を受信できるように指定してください。</li> </ul> </dd> </dl> </li> <li> <dl> <dt>メールアドレス確認</dt> <dd><input size="30" value="" name="email2"></dd> </dl> </li> <li> <dl> <dt>新しいパスワード</dt> <dd><input size="20" value="" name="password1" type="password"></dd> </dl> </li> ・・・・
適応スタイルシート
#bodyMainArea { float:left; padding-left:5px; width:716px; } #editList01 ul.editContents { background:#FFFFFF url(http://img.mixi.jp/img/basic/common/bg_edit_list001.gif) repeat-y scroll 0%; border-left:1px solid #F6A838; border-right:1px solid #F6A838; } #editList01 ul.editContents li { border-bottom:1px solid #F6A838; clear:both; } #editList01 ul.editContents li dl:unknown { clear: both; display: block; visibility: hidden; height: 0px; content: "."; } #editList01 ul.editContents li dl { display: inline-block } #editList01 ul.editContents li dl dt, #editList01 ul.editContents li dl dd { padding:5px 10px; } #editList01 ul.editContents li dl dt { float:left; width:120px; } #editList01 ul.editContents li dl dd { float:left; width:554px; word-break: break-all; _overflow: hidden; }
いろいろイジっていると、どうやら文書宣言によって表示モードの互換・標準によって違いが出て来るらしい。
○参考なったページ
"文書型宣言と表示モード"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
「表示モード:標準」となるこの2行を追加すればpaddingがwidthに追加されて正しいレイアウトで表示されるようになる。
dtd宣言自体 書いていないと以下のdtd宣言にような「表示モード:互換」の動きをするようす(on winIE7)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
はまったちぅねん