为什么IE6浏览器下line-height属性不管用了:建议:尽可能的手写代码，可以有效的提高学习效率和深度。并不是所有的情况都会导致line-height属性在IE6浏览器下失效， 而是在特定条件才会遇到。例如以下代码就是正常的：
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/CSS">.mytest{ width: 100px; height: 40px; border: 1px solid red; font-size: 14px; line-height: 40px;}</style></head><body><div class="mytest">蚂蚁部落</div></body></html>
以上代码在IE浏览器中运行一切正常。再看下面这种情况：
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.mytest{ width:300px; height:80px; border:1px solid red; line-height:80px;}</style></head><body><ul> <li class="mytest">蚂蚁部落 <input type="text" name="mytext" /> </li></ul></body></html>以上代码在其他主流浏览器中貌似是上下垂直居中（如果仔细观察会发现其实也没有精准的居中），但是在IE6中，line-height彻底失效了。也就是说如果文本与img、input、textarea、select和bject等元素连在一起使用的时候就会导致这种情况。解决方法如下:为img、input、textarea、select和bject等元素添加margin属性和vertical-align属性，margin-top和margin-bottom的属性值设置为:line-height值减去相应元素的高度然后再除以二。以上代码修改如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">.mytest { width: 300px; height: 40px; border: 1px solid red; line-height: 40px;}input { vertical-align: middle; height: 20px; margin-top: 10px; margin-bottom: 10px;}</style></head><body><ul> <li class="mytest">蚂蚁部落 <input type="text" name="mytext" /> </li></ul></body></html>但是以上代码只能够满足在IE6下垂直居中对齐（精准垂直居中对齐了），但是在其他浏览器下只能够貌似垂直居中的，不过对于图片是个例外，可以在任何浏览器中达到精准垂直居中对齐。也就是说如果是表单标签建议是padding使之精准垂直居中对齐。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0405/145.html
新闻热点
疑难解答
