54SA.COM|专注于系统运维管理,为中国SA提供动力!
Getting online shouldn't be tough. $7.99 .COMs
系统管理员之家Banner
当前位置: 主页 > Windows > 桌面应用 > Windows XP >

IE下CSS属性float:right下移换行或不显示的问题原因及解决方案

时间:2011-04-02 11:13来源:未知 编辑:admin

今天在为文章列表做时间显示的时候,发现使用 float: right 时,在IE下时间不显示 ,FF显示正常

 

  1. <!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN "   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">   
  3. <html   xmlns"http://www.w3.org/1999/xhtml ">   
  4. <head>   
  5. <meta   http-equiv"Content-Type " content"text/html; charset=gb2312 " />   
  6. <title> 无标题文档 </title>   
  7. <style   type"text/css ">   
  8. LI {  
  9.  padding:0 0 0 12px;   
  10.  MARGIN: 0px 0px 0px 8px;   
  11.  OVERFLOW:hidden;  
  12.  HEIGHT:25px;  
  13. }  
  14.  
  15. .timer  
  16. {  
  17.    float:right  
  18.    }  
  19.  
  20. </style> 
  21.  
  22. <body>   
  23. <div>   
  24. <ul>   
  25. <li>   <a   href= ‘'   title'文章标题 '   target'_blank '> 文章标题 </a>  
  26.   <span> (2011-3-17   9:30:00) </span> </li>   
  27. </ul>   
  28. </div>   
  29. </body>   
  30. </html> 
  31.  

去掉li的OVERFLOW:hidden; 属性后,时间 能够显示了,但却是下移换行,多方研究发现是IE的BUG

当非float的元素和float的元素在一起的时候,如果非float元素在先,那么float的元素将被排斥

也就是说,你的span是float:right,但是你的a还是float:none
如果要让两者占据同一行,要么你把span先于a显示,要么把a也设成float(float:left)

这样:

<li>  <span> (2011-3-17   9:30:00) </span> <a   href= ‘'   title= '文章标题 '   target= '_blank '> 文章标题 </a>     </li> 显示就正常了。
显示如:文章标题        2011-3-17

[责任编辑:admin]


关于 的文章
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
用户名:
最新评论 进入详细评论页>>