Affamative Way

前向きにグダグダいいながらコード書く

IEでpaddingがwidthに追加される場合とされない場合

ちょいと画面を作る機会があってmixiプロフィール変更ページみたいなレイアウトを作ることになって、とりあえずcssをそのまま適応みたものの、作ってるページ側IE7にて表示した時にだけpaddingがwidthにされないくてなんでか上手くかない。。。


↓やりたいこと(paddingがwidthに追加されている)


↓なんでかずれる(paddingがwidthに追加されない)

簡単な現象解説

以下のようなツリー構造になっている。

  • ul
    • li
      • dl
        • dt
        • dd

全体の横幅の指定は上位の「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">

はまったちぅねん