54SA.COM|专注于系统亚博体育官方网址管理,为中国SA提供动力!

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

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

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

?

  1. "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=gb2312?"?/>? ?
  5. <title>?无标题文档?title>? ?
  6. <style???type=?"text/css?">? ?
  7. LI?{ ?
  8. ?padding:0?0?0?12px;? ?
  9. ?MARGIN:?0px?0px?0px?8px;? ?
  10. ?OVERFLOW:hidden; ?
  11. ?HEIGHT:25px; ?
  12. } ?
  13. ?
  14. .timer ?
  15. { ?
  16. ???float:right ?
  17. ???} ?
  18. ?
  19. style>?
  20. ?
  21. <body>? ?
  22. <div>? ?
  23. <ul>? ?
  24. <li>???<a???href=?‘'???title=?'文章标题?'???target=?'_blank?'>?文章标题?a>??
  25. ??<span>?(2011-3-17???9:30:00)?span>?li>? ?
  26. ul>? ?
  27. div>? ?
  28. body>? ?
  29. html>?
  30. ?

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

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

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

这样:

  • ?? (2011-3-17?? 9:30:00) 文章标题 ????
  • 显示就正常了。
    显示如:文章标题??????? 2011-3-17

    [责任编辑:admin]

    关于 的文章
    ------分隔线----------------------------