今天在项目中碰到一个问题,就是在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元素是无效的。我们看下面的代码:
< 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了,汗,挺不爽的~~但还是说下代码吧
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元素是不起作用的。
更简单一点说,解决方法就是在非文字元素里加上
vertical-align:middle;