当前位置: 代码迷 >> Web前端 >> IE6上line-height 失效的解决方法
  详细解决方案

IE6上line-height 失效的解决方法

热度:448   发布时间:2012-11-07 09:56:10.0
IE6下line-height 失效的解决办法

IE6下使用line-height时候, 全文字会垂直居中对齐的, 如果当文字遇到图片, 文本框, 下拉框等其他元素时候在ie6下就会失效, 很多人一般用padding的方法来解决的。 这里说下另种方法。

先看下效果:点击阅览IE6下line-height 失效的解决办法

点击预览页面,可以查看源文件。里面也有详细说明。 以下是解决 IE6下line-height 失效的解决办法 主要代码。

?

<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>

  相关解决方案