internet-explorer-8 - li 中使用 IE8 的动态宽度背景

Question

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

我发现 IE8 不支持背景大小已经太晚了，我的问题是:如何在 IE8 中模拟这种效果？

我的第一个想法是在 li 标签内和 a 标签后面使用一些奇怪的 z 索引和可变宽度的 div，但我的尝试很少比惊人的结果(主要是因为我很难理解 css 定位)。我不确定这个控件驻留在可拖动和可调整大小的 jQuery 对话框上会使事情变得多么复杂，但为了这个问题，我们可以假设它不会移动或改变。<​​/p>

最终结果是这样的:

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

为人造下拉菜单生成的代码是沿着这些行(截断的列表):

<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

一种选择是在 anchor 元素下方放置一个具有所需背景 z 索引的元素。

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>