标签中包含input时line-height属性失效的解决办法
今天在项目中碰到一个问题，就是在ie6下，p标签的line-height不起作用。琢磨了好久，在javascript罗浮宫的同学提示下，才知道包含了input标签时，ie6下行高会失效，其它浏览器均正常。万恶的ie6啊！
在google上一搜，原来并不止input，当文字和img、input、textarea、select、object等对象在同一个容器中的时候，line-height属性在这些非文字的对象中就会失效。其中原理引来下从google上搜来的：
我们知道input标签是一个inline-block元素，也就是一个块元素，而line-height只可以应用于inline行内元素。所以line-height属性的设置对input元素是无效的。我们看下面的代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>www.mb5u.com</title>
<style type="text/css">
#hehe {width:300px;}
#hehe li {line-height:40px;}
input {line-height:40px;}
</style>
</head>
<body>
<ul id="hehe">
<li>Div CSS教程</li>
<li>CSS布局实例</li>
<li>CSS2.0教程</li>
<li>CSS模板下载<input name="text" type="text" /></li>
<li>CSS酷站欣赏</li>
<li>Web标准</li>
<li>MB5U.com首页</li>
</ul>
</body>
</html>
CSS模板下载所在的li标签及input元素，行高明显的小于40px。因为input是inline-block元素无line-height属性可言。我们只能通过变通的方法来解决问题。
这个变通的方法貌似也就只有使用margin了，汗，挺不爽的~~但还是说下代码吧
input {
border:1px solid #666;
width:120px;
height:20px;
margin:10px 0;
vertical-align:middle;
line-height:20px;
}
我们定义input元素的边框为一象素的灰色实线。宽度与高度分别是120px与20px。我们定义的li列表项的行高为40px。要使input元素如其它列表项一样，则设置input元素的上下边距为10px。即达到了行距为40px的效果。但这样会造成“CSS模板下载”与input标签水平不对齐，我们设置vertical-align:middle。使得文字与输入框水平对齐。关于vertical-align:middle的相关知识，心细的你或许会发现，我们这里也设置了line-height属性，值是20px。这里的line-height属性设置是input输入文字的行高，我们这样设置，可以使输入文字在输入框垂直居中。
通过此例，我们应该注重区分不同的属性所能作用的对象，line-height属性是inline元素所拥有的，对于block元素是不起作用的。
更简单一点说，解决方法就是在非文字元素里加上
margin: (容器的line-height - 对象本身的高度)/2px 0;
vertical-align:middle;
