百分百源码网-让建站变得如此简单! 登录 注册 签到领金币!

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>CSS教程> IE6下文字line-height失效的解决方法
分享文章到:

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

发布时间:01/15 来源: 浏览: 关键词:

当一个容器里的文字与img、input、textarea、select、object等元素相连时,对这个容器设置的line-height数值就会失效,同时以上元素的行高可能×2,受影响的浏览器:ie5.01、ie5.5、ie6.0。

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

.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;}

/* ?

这里 假设 ?input 高度等于 20?

margin: (所属line-height-自身高度)/2px 0;

就等于 margin:(100-20)/2px 0 = margin:40px 0;

大致效果是有了, 肯定还是有点小偏差,input高度是我假设20的。

*/

.aa input{ margin:40px 0; vertical-align:middle; }

</style>

<div class="aa">居中对齐 <input name="" type="text" /></div>

 

问题:在ie6中,当文字和img、input、textarea、select、object等对象在同一个容器中的时候,line-height属性失效。
只有全文字时,line-height属性才有效。

解决方法:
在其中一个非文字的对象的样式中增加:
margin: (容器的line-height - 对象本身的高度)/2px 0; 
vertical-align:middle;

解决问题。

 

打赏

打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

百分百源码网 建议打赏1~10元,土豪随意,感谢您的阅读!

共有14人阅读,期待你的评论!发表评论
昵称: 网址: 验证码: 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧!

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板