IE6下line-height失效问题

作者：郑州网站建设 2012/10/12 11:48:07 点击：来源：

以前做页面IE6行高问题,总出.但为了省时间,都改用PADDING撑起来去解决了....就直接不用行高解决.今天有空又在网上查了查.总结一下解决方法!

因为li中加入图片，会导致line-height失效如:
当在一个容器里文字和img、input、textarea、select、object等元素相连的时候，对这个容器设置的line-height数值会失效；同时以上元素的行高可能×2：

受影响的浏览器： Microsoft Internet Explorer 5.01 / Windows Microsoft Internet Explorer 5.5 / Windows Microsoft Internet Explorer 6

解决方法：

<!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=utf-8" /> 
<title>灰狼博客www.itlobo.com</title> 
<styletype="text/css"> 
body{margin:0;padding:0;font-size:14px;color: #000; font-family:"Courier New", Courier, monospace;padding-top:20px} 
a{text-decoration:none} 
h1{font-size:18px;height:22px;margin:0;padding:0} 
.content{width:300px;margin:0 auto;height:100%} 
ul{margin:0;padding:0;list-style:none} 
.itlobo li,.myitlobo li{ line-height:50px;height:50px;border:1px solid #eee;width:300px;margin:4px 0;text-indent:1em} 
.itlobo li img{margin:18px 0;vertical-align:middle} /*所属line-height-自身img,input,select,object高度)/2px */ 
</style> 
</head> 
  
<body> 
<div class="content"> 
<h1>我加了img的margin</h1> 
<ul class="itlobo"> 
<li><a href="#" target="_blank>代码演示</a> <img src="images/icon_rss.gif" /></li> 
<li><a href="#" target="_blank">代码演示</a></li> 
</ul> 
<h1>我没有加</h1> 
<ul class="myitlobo"> 
<li><a href="#" target="_blank">代码演示</a> <img src="images/icon_rss.gif" /></li> 
<li><a href="#" target="_blank">代码演示</a></li> 
</ul> 
</div> 
</body> 
</html>

对和文字相连接的img、input、textarea、select、object等元素加以属性
margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle