カテゴリー: lte IE 9

IE8でテーブルのthやtdの paddingが計算されていないような挙動をしていた。
でも

table-layout: fixed;

で治った。

【追記】
だけど描画方法を直すと横幅の見た目が変わるので注意が必要。

そもそもの原因は、
table-layout: fixed;が無い状態で、
paddingを設定したtdの隣のtdのpテキストが、
横幅より長かったのがいけなかったらしい。なんだそれ……。

下記みたいな▼▼
td class=”index”にwidthとpaddingを設定した
ソースを

						<table class="formtable">
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									コンテンツ
								</td>
							</tr>
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									<p class="attention">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</p>
								</td>
							</tr>
						</table>

こんなふうに▼▼
二つのテーブルに分けたら解消した。なんでやねん……。

						<table class="formtable">
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									コンテンツ
								</td>
							</tr>
						</table>
						<table class="formtable">
							<tr>
								<td class="index"><br></td>
								<td colspan="3">
									<p class="attention">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</p>
								</td>
							</tr>
						</table>

【2015年1月追記】
IE8限定の現象。
tableのtdに対してbox-sizing:border-boxを設定した状態で、
横のpaddingを%で指定するとうまくいかない。
こちらは、px指定にすることによって回避。

参考サイト様
http://www.htmq.com/style/table-layout.shtml
http://html-coding.co.jp/knowhow/tips/000219/

そんな日がいつ来るんだろう？とは思いますが。
css3を補助する系のjsは、別の不都合を引き起こしたりするので敬遠しています。
なので背景画像を使ってみました。
リセットcssは効かせた状態で作っています。

マークアップはこんな感じ

<span class="bg">
	<input type="text" class="textTest" />
</span>

cssはこんな感じです。

span.bg{
	background: url(../img/bg_test01.png) center top no-repeat;
	width:212px;
	height:31px;
	display:block;
	padding:8px;
}

span.bg input{
	width:212px;
	height:31px;
	line-height:31px;
	border:0;
	background:#fffcd2;
}