标签中包含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;