具有渐变背景的动态宽度 Div - IE8 和 IE7

Question

我正在尝试创建以下内容。

问题在于 row1 中的内容与 row2 中的内容具有不同的渐变背景。

row1 也动态填充数据库中的内容，因此它可能有 2 个或 6 个项目。

所以我希望 row2 的渐变不断重复，以匹配其兄弟的宽度。 我无法在容器上设置渐变，因为每个容器都有不同的背景图像渐变。

问题在于 IE8 和 7，因为它们只重复第 2 行宽度的渐变，所以如果第 1 行更短或更宽，就会出现空白间隙。

 <div id="content">
     <ul class="product-list">
         <li class="product-thumb"> 
             <a href="#" class="product-image"><img src="" /></a>
                 <h3> <a href=""> prod1</a></h3>
          </li>
          <li class="product-thumb"> 
              <a href="#" class="product-image"><img src="" /></a>
              <h3> <a href=""> prod2</a></h3>
          </li>
      </ul>
      <ul class="footer-menu">
          <div class="footer-container">
              <li><a href="#">Link1</a> </li>
              <li><a href="#" >link2</a></li>
              <li>info</li>
              <div class="footer-middle-background"></div>                 
          </div>
      </ul>
 </div>

Answer 1

您不能在 ul 中使用类似的 div。

如果您将div 移出ul，它将自动变为100% 宽（除非您在其他地方指定了其他内容...）。

  <div class="footer-container">
    <div class="footer-middle-background">
      <ul class="footer-menu">
          <li><a href="#">Link1</a> </li>
          <li><a href="#" >link2</a></li>
          <li>info</li>
      </ul>
    </div> 
  </div>