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>