Css 具有跨浏览器兼容性的ul内部li的绝对定位

我有这样的想法：

<div style="width:1300px">
  <ul class="ul-length ul-textalign">
    <li class="li-horizontal"> A </li>
    <li class="li-horizontal"> B </li>
    <li class="fillgap"/>
  </ul>
</div>

在整个宽度上设置背景的最简单方法可能是设置ul的背景，但我不能这样做，因为它不适合预期的设计。我需要能够用lis做这件事。我上面的代码导致了IE中的一个问题：li fillgap似乎保留在页面流中，因为它放在前一个lis的旁边，而不是在ul的开头

有什么想法吗

以下是预期结果（在opera中）：

以下是IE中的结果：

---

添加

位置：相对
至
.ul长度
。这使得li上的
位置：绝对
相对于
.ul长度

这允许您将
宽度从
1300px
更改为
100%

这是一把小提琴：

不过，我还是不太清楚为什么需要在
li
中添加
position:absolute
。如果你想让它保持在原来的位置，为什么
位置：绝对
它？
将
位置：相对
添加到
.ul长度
。这使得li上的
位置：绝对
相对于
.ul长度

  .ul-length li{
        z-index:2;
        position:relative;
    }
.ul-length li.fillgap {
    background: none repeat scroll 0 0 red;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    top:0;
    left:0
}

    .ul-length {
      with:100%;
      position:relative;
    }

这允许您将
宽度从
1300px
更改为
100%

这是一把小提琴：

不过，我还是不太清楚为什么需要在
li
中添加
position:absolute
。如果你想让它保持原样，为什么
位置：绝对
它？
嗨，谢谢你的回答。我添加了这个，但它并没有改变我的主要问题。查看我的帖子，我添加了图片。嗯，是的，我忘记了我把lis水平放置的事实。好的。。。对我来说，小提琴也很管用。但在我的应用程序中不起作用。我认为一些css文件中有一些不兼容的地方…对不起，我还没有读到你的评论。如果你的网站是在线的，我可以看一看。这个网站不会在线，它是供私人使用的。有没有办法让最后一个li只占用ul中的剩余空间？在我的css文件中找不到错误。嗨，谢谢你的回答。我添加了这个，但它并没有改变我的主要问题。查看我的帖子，我添加了图片。嗯，是的，我忘记了我把lis水平放置的事实。好的。。。对我来说，小提琴也很管用。但在我的应用程序中不起作用。我认为一些css文件中有一些不兼容的地方…对不起，我还没有读到你的评论。如果你的网站是在线的，我可以看一看。这个网站不会在线，它是供私人使用的。有没有办法让最后一个li只占用ul中的剩余空间？在我的css文件中找不到问题所在。
  .ul-length li{
        z-index:2;
        position:relative;
    }
.ul-length li.fillgap {
    background: none repeat scroll 0 0 red;
    display: block;
    height: 100%;
    position: absolute;
    width: 100%;
    z-index: 1;
    top:0;
    left:0
}

    .ul-length {
      with:100%;
      position:relative;
    }