实现兼容的两栏的li列表，带disc和超出字数...效果

目标：形成兼容ie7+的li 两列列表

<ul>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
    <li>xxx</li>
</ul>

css

ul + clearfix的class
li+text-overflow  的class{
  float:left;
  background:url(disc.jpg) no-repeat;
  padding-left: 10px; //给background-image留一个位置  
  padding-top/bottom：最好一致//disc才会居中
  width：380px; //超过长度变成...
  margin-right：30px; //和右边li的间距；用padding会有兼容问题          
}

.clearfix:after {
    content:"";
    display:block;
    visibility:hidden;
    height:0px;
    line-height:0px;
    clear:both;
    zoom:1;
}

.text-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

 

出现问题的两方面

左边list-style-type

在ie7及以下，li下的list-style-type会因为float：left;  list-style-position:outside; width:xxpx; 等等原因消失

统一解决方法：给li bakcground：url() no-repeat left middle; padding-left:10px;

右端用padding会出现兼容问题，改为margin-right就可以

示意图如下