IE6和IE7中国银行内元素后的波动元素被折行的难

2021-03-18 12:12 jianzhan

1、案例

XML/HTML Code拷贝內容到剪贴板
  1. <ul class="list">  
  2.  <li><a href="#" title="">新闻1Benjamin</a><span>2014-05-06</span></li>  
  3.  <li><a href="#" title="">新闻1Benjamin</a><span>2014-05-06</span></li>  
  4.  <li><a href="#" title="">新闻1Benjamin</a><span>2014-05-06</span></li>  
  5.  <li><a href="#" title="">新闻1Benjamin</a><span>2014-05-06</span></li>  
  6. </ul>  
CSS Code拷贝內容到剪贴板
  1. <style type="text/css">   
  2.  body,ul{padding:0;margin:0;}   
  3.  ul{list-style-typenone;border:1px solid #ccc;}   
  4.  li{padding-left:0;}   
  5.  .list{width:300px;margin:100px auto;}   
  6.  .list li{height:24px;line-height24px;border-bottom1px solid #ccc;margin-bottom:-1px;padding-left10px;}   
  7.  .list li span{float:rightright;margin-right:10px;}   
  8.  .list li .float_a{float:left;}   
  9.  .fix {*zoom:1;}   
  10.  .fix:after {displayblockcontent".";visibilityhidden;clearboth;height: 0;overflowhidden;}   
  11. </style>  

2、各访问器实际效果图

3、缘故剖析
1.规范参照:
W3C CSS2.1标准文本文档里针对波动元素与非波动行内元素邻近时的状况有以下解释。下列是重要段落:
A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float. If there’s a line box, the top of the floated box is aligned with the top of the current line box.
由上面的叙述能够获得下列结果:假如1个元素波动前是1个行内元素,则该元素波动后,顶部应与其以前所属的行框顶部对齐。
2.难题叙述:
IE6 IE7 IE8(Quick)下,若波动元素以前存在弟兄行内非波动元素,IE 会将波动元素所属的“当今行”觉得是其前边的弟兄行内元素所造成的密名框的底边,致使该波动元素折行。

4、处理计划方案
1.全波动

CSS Code拷贝內容到剪贴板
  1. <ul class="list">   
  2.  <li class="fix"><a class="float_a" href="#" title="">新闻1Benjamin</a> <span>2014-05-06</span></li>   
  3.  <li class="fix"><a class="float_a" href="#" title="">新闻1Benjamin</a> <span>2014-05-06</span></li>   
  4.  <li class="fix"><a class="float_a" href="#" title="">新闻1Benjamin</a> <span>2014-05-06</span></li>   
  5.  <li class="fix"><a class="float_a" href="#" title="">新闻1Benjamin</a> <span>2014-05-06</span></li>   
  6. </ul>  

2.置放波动元素在前

CSS Code拷贝內容到剪贴板
  1. <ul class="list">   
  2.  <li><span>2014-05-06</span><a href="#" title="">新闻1Benjamin</a> </li>   
  3.  <li><span>2014-05-06</span><a href="#" title="">新闻1Benjamin</a> </li>   
  4.  <li><span>2014-05-06</span><a href="#" title="">新闻1Benjamin</a> </li>   
  5.  <li><span>2014-05-06</span><a href="#" title="">新闻1Benjamin</a> </li>   
  6. </ul>  

3.精准定位position
4.IE Hack+margin负值