为什么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
时间： 2024-10-12 07:30:47