The solution to the invalidation of the text line-height under IE6

When the text in a container is connected with IMG, input, textarea, select, object and other elements, the Line-height value set for the container is invalidated, and the row height of the above elements may be x2, the affected browsers: ie5.01, ie5.5, ie6.0.

The solution is to attribute the IMG, input, textarea, select, object, and other elements connected to the text as follows:

. line-height{
Margin: (Belong to line-height-oneself img,input,select,object height)/2px 0;
Vertical-align:middle;
}

<style type= "Text/css Tutorial" >

. aa{height:100px; width:300px line-height:100px; Background-color: #099;

/* ?

This assumes that the input height equals 20?

Margin: (subordinate line-height-own height)/2px 0;

equals margin: (100-20)/2px 0 = margin:40px 0;

The general effect is there, there must be a little deviation, input height is I suppose 20.

*/

. AA input{margin:40px 0 vertical-align:middle;

</style>

<div class= "AA" > Center align <input name= "" type= "text"/></div>

Question: In IE6, when text and IMG, input, textarea, select, object are in the same container, the Line-height attribute fails.
The Line-height property is valid only when full text is available.

Workaround:
Increase in the style of one of the non-literal objects:
Margin: (Line-height of the container-the height of the object itself)/2PX 0;
Vertical-align:middle;