Problem mit der vertikalen und horizontalen Bildzentrierung unbekannter Größe in Container_CSS/HTML

Im CSS-Layout war die vertikale Zentrierung von Bildern unbekannter Größe immer ein Problem. Standardbrowser müssen nur die Zeilenhöhe des Containers und die vertikale Ausrichtung des Bildes festlegen. Vor ein paar Monaten sah ich auf einer ausländischen Website eine Lösung für den IE. Ich hielt sie nicht für ideal und nahm sie nicht ernst. In letzter Zeit sehe ich oft Freunde, die ähnliche Fragen stellen, und ich habe den Code ausgegraben und ihn für den IE geändert.

CSS
.box{
height:140px;
width:200px;
border: solid 1px #666;
text-align: center;/*Horizontal zentriert*/
line-height:140px;
font-size:126px;/*IE hier vertikal zentriert*/
}

.box[class] {
font-size:12px;/*Standardbrowser erfordern diesen Wert*/
}

img{
vertical-align:middle;/*Standardbrowserbilder sind vertikal zentriert* /
}

Ursprünglich war die Schriftgröße des Ausländercodes dieselbe wie die Höhe. Nachdem ich es ausprobiert hatte, war die Höhe des Containers etwas höher als die des Standardbrowsers Um die Schriftgröße um 100 % zu reduzieren, sehen auf diese Weise etwa die gleichen Werte aus. Der Grund ist noch unklar.

Der Test war unter IE5.5, IE6.0, FF1.5 und Opera9.0 erfolgreich, für IE5.0 und IE7.0 ist er jedoch ungültig.