ie6/7新闻列表错位

想要的效果

常规：

<div class=box">
    <h2><a href="#">党建动态</a></h2>
    <ul>
        <li>
            <a href="#">关于积极申报海淀区文明单位的通知</a>
            <span>2015-05-11</span>
        </li>
        <li>
            <a href="#">关于积极申报海淀区文明单位的通知</a>
            <span>2015-05-11</span>
        </li>
        <li>
            <a href="#">关于积极申报海淀区文明单位的通知</a>
            <span>2015-05-11</span>
        </li>
        <li>
            <a href="#">关于积极申报海淀区文明单位的通知</a>
            <span>2015-05-11</span>
        </li>
    </ul>
</div>

使用a{float:left;}，span{float:right;}这种情况下在ie6出现错位换行

并且会出现下面情况

解决方法一：

<div class=box">
    <h2><a href="#">党建动态</a></h2>
    <ul>
        <li>
            <span>2015-05-11</span>
            <a href="#">关于积极申报海淀区文明单位的通知</a>
        </li>
        <li>
            <span>2015-05-11</span>
            <a href="#">关于积极申报海淀区文明单位的通知</a>
        </li>
        <li>
            <span>2015-05-11</span>
            <a href="#">关于积极申报海淀区文明单位的通知</a>
        </li>
        <li>
            <span>2015-05-11</span>
            <a href="#">关于积极申报海淀区文明单位的通知</a>
        </li>
    </ul>
</div>

解决方法二：

让li里面的内容，不管是a链接的标题还是时间还是包含时间的em、span都左(右)对其，即li{text-align:left;}（li{text-align:right;}） 

其次：让a左浮动(em右浮动)，即a{float:left}（em{float:right}）