ie6/7下 li内浮动元素下边距4像素bug解决方案

问题:
 
在IE6/7 下,如果给li的元素有浮动,则会造成li下边距多出四个像素的问题,如图所示:
ie6/7下 li内浮动元素下边距4像素bug解决方案_第1张图片
解决方案: 
1、给li添加:vertical-align属性,除baseline的任意值 
2、去掉高、宽、margin、padding、zoom等属性 (但适用性不是太好)
3、li添加float属性,li浮动时里面的浮动元素也无需再清楚浮动 


示例代码:

 <!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>无标题文档</title> <mce:style type="text/css"><!-- ul { width:300px; list-style:none;} li { padding-bottom:10px; width:300px; vertical-align:top;} li.li_odd{ background-color:#efefef;} li.li_even{ background-color:#cfcfcf;} span { float:left; width:100px; background-color:#06C; font-family:宋体;} .clearfix { zoom:1;} .clearfix:after { display:block; float:none; clear:both; content:""; font-size:0; height:0;} --></mce:style><mce:style type="text/css" mce_bogus="1"><!-- ul { width:300px; list-style:none;} li { padding-bottom:10px; width:300px; vertical-align:top;} li.li_odd{ background-color:#efefef;} li.li_even{ background-color:#cfcfcf;} span { float:left; width:100px; background-color:#06C; font-family:宋体;} .clearfix { zoom:1;} .clearfix:after { display:block; float:none; clear:both; content:""; font-size:0; height:0;} --></mce:style><style type="text/css" mce_bogus="1" mce_bogus="1"> ul { width:300px; list-style:none;} li { padding-bottom:10px; width:300px; vertical-align:top;} li.li_odd{ background-color:#efefef;} li.li_even{ background-color:#cfcfcf;} span { float:left; width:100px; background-color:#06C; font-family:宋体;} .clearfix { zoom:1;} .clearfix:after { display:block; float:none; clear:both; content:""; font-size:0; height:0;}</style> </head> <body> <ul> <li class="li_odd clearfix"><span>中华人民共和国中华人民共和国中华人民共和国中华人民共和国</span><span>2</span><span>3</span></li> <li class="li_even clearfix"><span>1</span><span>2</span><span>中华人民共和国中华人民共和国中华人民共和国中华人民共和国中华人民共和国</span></li> <li class="li_odd clearfix"><span>1</span><span>2</span><span>3</span></li> </ul> </body> </html>

转帖自:http://blog.csdn.net/spring21st/archive/2010/08/24/5834887.aspx

你可能感兴趣的:(html,XHTML,IE,Class,文档,float)