IE6〜8のトンデモな違い：修正

前述の表示状態を修正しました。

特にIE6*1の表示は、CakePHPのgeneric.css(ver1.2.5)に由来していたので注意が要りそうです*2

IE6：submitボタンの幅

IE6で、Submitボタンの幅が異様に延びている状態について。

これはinput

cake.generic.css

input, textarea {
	clear: both;
	font-size: 140%;
	font-family: "frutiger linotype", "lucida grande", "verdana", sans-serif;
	padding: 2px;
	width: 100%;
}

input（およびtextarea）について
　width: 100%;
で設定し、その後

input[type=submit] {
	display: inline;
	font-size: 110%;
	padding: 2px 5px;
	width: auto; // ここ
	vertical-align: bottom;
}

で width:auto に上書きしているはずが、なぜかIE6では有効になっていないようです。

そこに私の独自CSSでフォーム領域全体の幅を広げたりしたので、ああいう表示になったようです。

オリジナルのcake.generic.cssのみだと、こんな表示でした。

IE8

IE6

・・・オリジナルのCSSでも、ビミョー感みなぎる表示ですが。。

inputにwidth: auto;を追加指定すると、ボタン幅は解消されます(但し、inputの幅も変わります。)

input {
	width: auto;
}

横並べボタンのずれ

上記、input関連のCSSを修正したら、IE8のキャンセルボタンずれも解消されていました。

IE6ではずれが残っているのですが、IE6にあまり手間取るのも何なので、「IE6以下では縦並べ」とすることにしました。

IE6のみ、独自のCSS追加。
app/views/layout/default/ctp

<!--[if lte IE 6 ]>
<?php
	echo $html->css('ie6');
?>
<![endif]-->

app/webroot/css/ie6.css

.backButton {
	position: static;
}

他にIE6固有の修正が要る場合、同様にie6.cssに入れていく予定です。

*1:InternetExplorerCollectionの他、本家IE6でも同様の表示になることを確認

*2:但し、私の独自CSSの影響もあります