帶漸變背景的動態寬度div - IE8和IE7

Question

我正在嘗試創建以下內容。

alt text http://www.freeimagehosting.net/uploads/a972d988f8.jpg

的問題是，在ROW1的東西具有不同梯度的背景比在ROW2的東西。

而且ROW1動態裝滿東西從數據庫中，所以它可以有2項或6

所以我想從2行梯度不斷重複它從它的兄弟姐妹相匹配的寬度。 我無法在容器上設置漸變，因爲每個都有不同的背景圖像漸變。

問題在於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>