Dynamic-width backgrounds in li using IE8

Question

I have been working on a new drop-down control, using dropkick, and I have it working in Chrome/FF, but not in IE8, which is sadly still our target. I used a single-pixel background image with background-repeat:repeat-y and background-size:x% to get the desired effect.

I discovered too late that IE8 does not support background-size and my question is this: How do I emulate this effect in IE8?

My first thought is with some weird z-indexing and variable-width divs inside the li tags and behind the a tags, but my attempts at that have had less than spectacular results (largely because I have a hard time understanding css positioning). I am not sure how much it complicates things that this control resides on a draggable and resizable jQuery dialog, but for the sake of this question we can assume it won't move or change.

The end result is something like this:

The numbers in the parens as well as the fill percentage are filled in with the options via an AJAX call.

The code generated for the faux-dropdown is along these lines (truncated list):

<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>

And the relevant css is something like this:

.dk_options_inner li {
    background:white;
}

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

Answer 1

One option would be to place an element with the desired background z-indexed underneath your anchor element.

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>