Фон динамической ширины в li с использованием IE8

Question

Я работаю над новым выпадающим элементом управления, используя dropkick, и у меня он работает в Chrome/FF, но не в IE8, который, к сожалению, остается нашей целью. Я использовал однопиксельное фоновое изображение с background-repeat:repeat-y и background-size:x%, чтобы получить желаемый эффект.

Я обнаружил слишком поздно, что IE8 не поддерживает размер фона, и мой вопрос заключается в следующем: Как эмулировать этот эффект в IE8?

Моя первая мысль с некоторыми странно г-индексации и переменной ширины дивы внутри li тегов и позади a тегов, но мои попытки в том, что имели менее впечатляющие результаты (в основном потому, что у меня есть трудно понять css позиционирование). Я не уверен, насколько это усложняет ситуацию, когда этот элемент управления находится на перетаскиваемом и изменяемом по размеру диалоговом окне jQuery, но ради этого вопроса мы можем предположить, что он не будет двигаться или изменяться.

Конечным результатом является то вроде этого:

Числа в круглые скобки, а также процент заполнения заполняются с параметрами, с помощью вызова 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

Одним из вариантов было бы место элемент с желаемым фоном 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>