牧羊岛

懒是不会有好果子吃滴//

导航

IE BUG 当li里面有浮动元素时，ie6和ie7中底部多出2px

Posted on 2010-03-24 19:09  牧羊岛  阅读(2014)  评论(0)    收藏  举报

这个破问题搞了一个多小时
先把代码放上来吧，反正已经解决了 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2  <html xmlns="http://www.w3.org/1999/xhtml">
 3  <head>
 4  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <link href="css/public.css" rel="stylesheet" type="text/css" />
 7 <style>
 8 *{font-size:12px;}
 9 body,div,ul,ol,li,p,h1,h2,h3,h4,h5,h6,span,form,input{margin:0; padding:0;}
10 h3,h4{font-weight:normal;}
11 ul,ol,li{list-style-type:none;}
12 img{border:0;}
13 a{text-decoration:none; color:#000;}
14 .F_L{float:left;}
15 .F_R{float:right;}
16 .C_B{clear:both;}
17 .Clear:after { content:""; clear:both; height:0; visibility:hidden; display:block;}
18 .Pa_8{padding:8px;}
19 .Pa_0_8{padding:0 8px;}
20 .W_960{width:960px; margin:0 auto; clear:both}
21 .LeftSide{float:left; width:234px;}
22 .Title{font-weight:bold; font-size:14px; padding-left:8px;}
23 .LeftSide_Star{height:222px; overflow:hidden;}
24 .LeftSide_Star .Title{height:32px; background-color:#cecece; line-height:32px; color:#3e3e3e;}
25 .LeftSide_Star .Tab a{display:block; float:left; height:26px; line-height:26px; background-color:#e5e5e5; text-align:center; width:78px; color:#7e654f;}
26 .LeftSide_Star .Tab a:hover{background-color:#FFF;}
27 .LeftSide_Star .First{height:64px;}
28 .LeftSide_Star .First img{float:left; margin-right:8px; width:60px; height:58px;}
29 .LeftSide_Star span{font-weight:normal;}
30 .LeftSide_Star h2{font-size:14px;}
31 .LeftSide_Star h1{line-height:21px; margin:0; padding:0; border:0; font-weight:normal;}
32 .LeftSide_Star li{line-height:21px; clear:both; height:21px; display:block;}
33 .LeftSide_Star li.Tr *{float:left; width:72px;}
34 #Tab_Con_Star{color:#7e654f;}
35 
36 </style></head>
37 <body><div class="LeftSide_Star">
38 <div class="Title">雅库之星</div>
39 <div class="Tab"><a href="javascript:;">周排行</a><a href="javascript:;">月排行</a><a href="javascript:;">季度排行</a></div>
40 <div id="Tab_Con_Star" class="C_B Pa_8">
41 <div>
42 <ul>
43 <li class="First"><img src="images/star_img.jpg"/>
44 <h2>显示姓名<span>（人气2132）</span></h2>
45 <h3>这里显示个性签名。。。或其他信息。。。</h3>
46 </li>
47 <li class="Tr">
48 <span>排名第二</span>
49 <span>浙江杭州</span>
50 <span>人气：5454</span>
51 </li>
52 <li class="Tr">
53 <span>排名第二</span>
54 <span>浙江杭州</span>
55 <span>人气：5454</span>
56 </li>
57 <li class="Tr">
58 <span>排名第二</span>
59 <span>浙江杭州</span>
60 <span>人气：5454</span>
61 </li>
62 <li class="Tr">
63 <span>排名第二</span>
64 <span>浙江杭州</span>
65 <span>人气：5454</span>
66 </li>
67 </ul>
68 </div>
69 </div>
70 </div>
71 </html>

 

还是要做Hack

 

1 *html .LeftSide_Star li{margin-bottom:-2px;}/*Hack For IE6*/
2 *+html .LeftSide_Star li{margin-bottom:-2px;}/*Hack For IE7*/