IE6行高(line-height)失效

IE6行高(line-height)失效

近日做项目，遇到一个IE6行高失效的Bug。

场景还原：

相关代码

<a class="bug" href=""><span></span>i am bug</a>

.bug{height:60px;line-height:60px;background-color:#999;}
.bug span{display:inline-block;width:100px;height:20px;background-color:#ff0000;vertical-align:middle;}

如图所示：

除IE6行高失效，其他浏览器按照预期正常显示。

解决方案：

在使用以往经验多次排查碰壁之后，不得不求助于万能的google，结果搜到博文一篇《IE6行高(line-height)失效》，文中提到：当一个容器里的文字与img、input、textarea、select、object等元素相连时，对这个容器设置的line-height数值就会失效…，按其特征，其实就是行内块元素与周围文字相连时导致IE6下父层行高失效。

解决方法：对与文字相连接的img、input、textarea、select、object等元素加以属性，代码如下：

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

即在IE6下为行内块元素单独设置 _margin:（60-20）/2px 0;

以上，希望大家多多测试，感谢！