使用IE8的li中的动态宽度背景

Question

我一直在研究一个新的下拉控件，使用dropkick，我让它在Chrome / FF中运行，但不是在IE8中，这仍然是我们的目标。我使用background-repeat:repeat-y和background-size:x%的单像素背景图像来获得所需的效果。

我发现IE8不支持背景大小太晚了我的问题是： 如何在IE8中模拟此效果？

我的第一个想法是在li标签内和a标签后面有一些奇怪的z-indexing和可变宽度div，但我的尝试却没有那么引人注目的结果（很大程度上是因为我很难理解css定位）。我不确定这个控件在可拖动和可调整大小的jQuery对话框中存在多大的复杂性，但为了这个问题，我们可以假设它不会移动或改变。<​​/ p>

最终结果如下：

parens中的数字以及填充百分比通过AJAX调用填入选项。

为faux-dropdown生成的代码沿着这些行（截断列表）：

<div class="dk_options" style="top: 19px;">
<ul class="dk_options_inner">
    <li class=" ">
        <a style="background-size:0%;" data-dk-dropdown-value="">&nbsp;</a>
    </li>
    <li class="dk_option_current ">
        <a style="background-size:6.6666666666666666666666666700%;" data-dk-dropdown-value="08:30AM">8:30 AM (1)</a>
    </li>
    <li class=" ">
        <a style="background-size:13.333333333333333333333333330%;" data-dk-dropdown-value="08:45AM">8:45 AM (2)</a>
    </li>
    <li class=" ">
        <a style="background-size:100%;" data-dk-dropdown-value="09:00AM">9:00 AM (15)</a>
    </li>
    <li class=" ">
        <a style="background-size:0%;" data-dk-dropdown-value="09:15AM">9:15 AM (1)</a>
    </li>
    <li class=" ">
        <a style="background-size:6.6666666666666666666666666700%;" data-dk-dropdown-value="09:30AM">9:30 AM (1)</a>
    </li>
</ul>
</div>
</div>

相关的CSS就是这样的：

.dk_options_inner li {
    background:white;
}

.dk_options a {
    background-image:url(./images/dot.png); 
    background-repeat:repeat-y; 
}

Answer 1

一种选择是在锚元素下面放置一个z-indexed所需背景的元素。

CSS

.dk_options_inner li {
  position: relative;
}

.dk_options_inner span.effect {
  background-image:url(./images/dot.png); 
  display: inline-block;
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
}

HTML

<div class="dk_options" style="top: 19px;">
  <ul class="dk_options_inner">
    <li class=" ">
       <a data-dk-dropdown-value="">&nbsp;</a>
       <span class="effect" style="width: 0%;"></span>
    </li>
    <li class="dk_option_current ">
       <a data-dk-dropdown-value="08:30AM">8:30 AM (1)</a>
       <span class="effect" style="width: 6.6666666666666666666666666700%;">
    </li>