Unknown size picture vertical and horizontal center problem in a known container

Problem CSS layout, unknown size picture Vertical Center, has been a headache problem, standard browser as long as the container line-height and picture of the vertical-align:middle; it's OK, but it's no use for IE, A few months ago in the foreign site saw a solution to ie, the feeling is not very ideal, also did not matter. Recently saw friends often ask similar questions, and the code turned out, for IE changed.

Css
. box{
height:140px;
width:200px;
Border:solid 1px #666;
text-align:center;/* Horizontal Center *
line-height:140px;
Font-size:126px;/*ie by this vertical center * *
}

. box[class]{
font-size:12px;/* Standard browser needs this value
}

img{
vertical-align:middle;/* Standard browser picture vertically centered *
}

The original foreigner code is the same as the height of the font-size, try to lower the height of the container than the standard browser, many times to try to the size of the font minus 10% container height, so that looks similar. As for what reason is not clear.

Tested successfully under IE5.5, IE6.0, FF1.5, Opera9.0, invalid for IE5.0 and IE7.0.