InternetExplorer

.thumbnail img {
	max-width: 200px;
	max-height: 200px;
	width: auto;
	height: auto;
}
.free .thumbnail img {
	max-width: initial;
	max-width: auto;
	max-height: initial;
	max-height: auto;
}

initialはスタイル適用前の状態へ設定するための値で、CSS3世代の比較的新しいものです。
併記しているautoはinitialに対応していないInternetExplorerのための設定です。
（IE10でもinitial表記が効かなかった…IE遅れてる…）

そもそも、いったん設定したものをリセットしなきゃいけない構造にするなってはなしですが、
継ぎ足しながら運用されてきた1000行ちかいCSSを突貫で直さなければいけないときや、他のベンダーと同時進行でCSS構築しなければならないスケジュールのときなど
やむを得ないケースもでてくるので、こいつはmax、min系以外でも活躍しそう。

参考：
テキストをスタイルシート適用前の状態に戻す方法

2013年4月27日2013年4月27日

IE8以上対応のページ作成で互換モードを予防する

2013年4月に、WindowsXPのサポート終了期限について公式アナウンスがでたこともあって
WEB屋さんの案件でも、IE8以上対応の案件も少しずつ増えてきました。
作る側の本音をいうと9以上のほうが個別対応が減ってコスト削減できるのですが
お客様としては、サポートが終わってもWindowsXPユーザが減るかどうかわからないので考慮したい背景があっての8だとか。

そんなわけで、喜んでIE7未対応で8から対応しているCSSを使用したページを作ったのですが
確認したパソコンのIE8が互換モードになっていて、意図した表示にならないケースが発生。
たしかに、コーディングの知識がない一般のInternetExplorerユーザは
アドレスバーの横にある紙が破けているアイコンが何なのかわからないわ。間違えて押す可能性もあるわ。

そこで、無用なトラブルを予防する工夫として
IEのレンダリングモードを標準準拠（つまりIE8なら8標準モード）にデフォルト設定するmetaタグを使ってみました。
これで、IE8のアドレスバーの横にある互換モードボタンも非表示になるので
互換モードで表示崩れになるトラブルも、いくらか予防できます。

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">

headの直後に入れるのがベストらしいです。

参考サイト：
IE8のレンダリングモードに関するまとめ

2012年9月13日2014年3月1日

IEに対応した※リストのCSS

※から始まるリストのスタイリングについて。よくある（？）方式だと2パターン思い当たります。

first-letterを用いたもの
<dl>を用いたもの

“IEに対応した※リストのCSS” の続きを読む

2012年9月2日2014年3月1日

IE6でposition:fixed;

cssで固定表示させるためにはposition:fixed;を設定しますが
IE6がこのプロパティに対応していないという…。

IE6用にposition:absolute;でいったん絶対位置表示を設定しておいて、
javascriptのスクロールイベントでスクロールした分だけcssのtopの値を増やすという手もありますが
これだとスクロールしたときガタつきがでてしまいます。

IE6だけの対策をわざわざ行うなら、スクロールがなめらかに仕上がるので expression のほうがおすすめです。

“IE6でposition:fixed;” の続きを読む