QQ 1640076782

2012年06月29日

IE6下文字line-height失效的解决方法

Filed under: 未分类 — lifengwu @ 1:31 上午

IE6下文字line-height失效的解决方法

当一个容器里的文字与img、input、textarea、select、object等元素相连时,对这个容器设置的line-height属性就会失效,同时以上元素的行高可能×2,只有全文字时,line-height属性才有效。受影响的浏览器:IE5.01、IE5.5、IE6.0。(目前IE5已经极少人用了,主要是针对IE6,IE6现在还是有很大一部分人在用的)

解决方法是对与文字相连接的img、input、textarea、select、object等元素加以属性,即:
在其中一个非文字的对象的样式中增加:
margin: (容器的行高 – 对象本身的高度)/2px   0; 
vertical-align:middle;

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

< style type=”text/css” >
.aa{ height:100px; width:300px; line-height:100px; background-color:#099;}
.aa input{ margin:40px   0; vertical-align:middle; }
</style>
<div class=”aa”>居中对齐 <input name=” ” type=”text”  /></div>