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

Posted 2023-03-06

【中文标题】使用 IE8 的 li 中的动态宽度背景

【英文标题】：Dynamic-width backgrounds in li using IE8

【发布时间】：2013-09-02 12:37:25

【问题描述】：

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

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

我的第一个想法是在 li 标签和 a 标签后面使用一些奇怪的 z-indexing 和可变宽度 div，但我在这方面的尝试并没有取得令人瞩目的结果（主要是因为我很难时间了解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; 

【参考方案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>

【讨论】：

谢谢！这让我启动并运行，尽管对于发生此情况的其他任何人，我也立即遇到了这个问题，所以要小心：***.com/questions/7764751/…