IE 6におけるline-height属性の失効の解決方法

ie 6では、文字とimg、input、textarea、select、objectなどのオブジェクトが同じコンテナにある場合、line-heightプロパティは無効になります.フルテキストの場合にのみ、line-heightプロパティが有効です.
ie 7はこのバグを解決し、以前のバージョンのieはピクチャ行の行高を元の半分に縮小した.画像スタイルシートを設定することで

.box img {
    vertical-align: middle;
    margin: 10px 0;
}

このうち10 pxは容器(box)の行の高さから画像の高さを差し引いた半分である.
解决IE 6では、画像にline-height属性が効かない解决方法を加えます.css设定では、ie 7やfirefoxなどのブラウザで适用される行高line-heightで行高を设定するのが一般的です.ただし、行に他の要素がある場合(画像、SPAN、li.)IE 6.0下line-heightは効果がありません.その後、資料を調べましたが、やはりそうです.資料は以下の通りです.
1つのコンテナにimg、input、textarea、select、objectなどの要素が接続されている場合、このコンテナに設定されたline-height値は失効します.同時に、上記の要素の行の高さが可能です.×2:
影響を受けるブラウザ:
Microsoft Internet Explorer 5.01/Windows
Microsoft Internet Explorer 5.5/Windows s
Microsoft Internet Explorer 6
解決方法:
文字に接続されたimg、input、textarea、select、objectなどの要素を属性する
margin:(line-height-自身img,input,select,object高さ)/2 px 0;
vertical-align:middle
例は次のとおりです.
元のコードは次のとおりです.
コードは次のとおりです.
.shouchang{width:200px;float:left;line-height:24px;}
現代コードは以下の通りです.
コードは次のとおりです.
.shouchang{width:200px;float:left;line-height:24px;}
.shouchang img{margin:3px 0;vertical-align:middle}
2.ページ全体にImgが多い場合は、直接定義できます
コードは次のとおりです.
img{
margin:(line-height-自身img,input,select,object高さ)/2 px 0;
vertical-align:middle
}
これで問題は解決できる!