码迷,mamicode.com
首页 > 其他好文 > 详细

IE6行高(line-height)失效

时间:2014-05-08 14:47:23      阅读:293      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   tar   

 

 

bubuko.com,布布扣
<a class="bug" href=""><span></span>i am bug</a>  
bubuko.com,布布扣
bubuko.com,布布扣
.bug{height:60px;line-height:60px;background-color:#999;}  
.bug span{display:inline-block;width:100px;height:20px;background-color:#ff0000;vertical-align:middle;}  
bubuko.com,布布扣

当一个容器里的文字与img、input、textarea、select、object等元素相连时,对这个容器设置的line-height数值就会失效…,按其特征,其实就是行内块元素与周围文字相连时导致IE6下父层行高失效。

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

 

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

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

以上,希望大家多多测试,感谢!

IE6行高(line-height)失效,布布扣,bubuko.com

IE6行高(line-height)失效

标签:style   blog   class   code   java   tar   

原文地址:http://www.cnblogs.com/baixc/p/3715669.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!