标签：
为什么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
标签：
原文地址：http://www.cnblogs.com/softwhy/p/4625183.html
