Container_CSS/HTML における不明なサイズの画像の垂直方向と水平方向のセンタリングの問題

CSS レイアウトでは、サイズが不明な画像の垂直方向の中央揃えは常に問題でした。標準ブラウザではコンテナの line-height と画像のvertical-align:middle; を設定するだけで済みました。数か月前、私は外国の ウェブサイト で IE の解決策を目にしましたが、それが理想的とは思えず、真剣に受け止めませんでした。最近、友人が同じような質問をしているのをよく見かけたので、コードを掘り出して IE 用に修正しました。

CSS
.box{
高さ:140px;
幅:200px;
ボーダー: 実線 1px #666;
テキスト配置: center;/*水平方向に中央揃え*/
line-height:140px;
font-size:126px;/*IE では垂直方向に中央揃え*/
}

.box[class] {
font-size:12px;/*標準ブラウザにはこの値が必要です*/
}

img{
vertical-align:middle;/*標準ブラウザ画像は垂直方向の中央に配置されます* /
}

元々、外国人のコードのフォントサイズは高さと同じでしたが、何度か試してみたところ、コンテナの高さは標準ブラウザよりも少し高くなりました。フォント サイズを 100% 縮小すると、10 個のコンテナの高さがほぼ同じになります。理由はまだ不明です。

IE5.5、IE6.0、FF1.5、Opera9.0 ではテストが成功しましたが、IE5.0 と IE7.0 では無効です。