IE6下line-height失效：当文字与图片img在同一行中显示时line-height失效的解决办法

问题描述：

在IE6兼容改造过程中，我遇到了一个比较诡异的问题。一个列表页的排序选项列表，当元素被选中（切换到该种排序下）后位置垂直居中就失效了。

应该显示为：

实际显示的效果为：

HTML代码结构如下：

 

问题原因分析：

当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效； 同时以上元素的行高可能×2

受影响的浏览器： 

　　Microsoft Internet Explorer 5.01

　　Windows  Microsoft Internet Explorer 5.5

　　Windows  Microsoft Internet Explorer 6

 

解决办法：

     通过调整图片img元素的样式来实现垂直居中的效果。经过调整在原先的IE9、chrome和safari下可以正常显示，同时在IE6环境下也可以正常显示

 

.selector img{
     margin:15px 0;/*所属line-height-自身img,input,select,object高度)/2px*/
     vertical-align:middle;
}

 最后注明一下版权，本文由yutiansanshou原创发表，你可以任意转载，但必需在明显位置注明作者和出处，而且不能用于任何商业用途