Android 2.3上奇怪的z-index行为

Question

我想我可能碰到过Android 2.3中的另一个z-index错误。我们有这个小工具，这使得像这样在所有主要的操作系统/浏览器的连击：

这里我们使用了HTML：

<ol> 
    <li> 
     <span class="ranking">1</span> 
     <h3> 
      <a href="...">TT Legends shows the exhilaration of motorbike racing</a> 
     </h3> 
     <span class="score-bar" style="width: 610px;"></span> 
    </li> 
    <li> 
     <span class="ranking">2</span> 
     <h3> 
      <a href="...">101-year-old grandmother 'comes back from the dead'</a> 
     </h3><span class="score-bar" style="width: 421px;"></span> 
    </li> 
</ol> 

，这是CSS：

.trending ol { 
    counter-reset: item; 
    list-style-type: none; 
    overflow: hidden; 
} 

.trending li { 
    position: relative; 
    min-height: 42px; 
    margin-bottom: 10px; 
    overflow: hidden; 
} 

.trending .ranking { 
    display: table-cell; 
    vertical-align: middle; 
    min-width: 40px; 
    text-align: center; 
} 

.trending h3 { 
    display: table-cell; 
    vertical-align: middle; 
    position: relative; 
    z-index: 2; 
    width: 100%; 
    margin-left: 40px; 
    padding: 5px; 
    line-height: 1.2; 
} 

.score-bar { 
    display: inline-block; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 40px; 
    width: 0; 
    z-index: 0; 
    background: #f3f5f9; 
} 

我们使用JS根据相关项目的得分来设置蓝色.score-bar范围的宽度。

在喜欢的HTC Desire和三星Galaxy S2 Android 2.3的设备它最终是这样的：

任何人都可以提出一个解决办法？我试过了所有我能想到的CSS调整，但似乎没有任何解决办法。

Answer 1

您需要做的是将.score-bar背景样式移动到跨度以外的其他样式。

删除得分栏跨度，并使用下面的代替。

这里是的jsfiddle例子... http://jsfiddle.net/qaYbS/

注：在我的jsfiddle使用的背景颜色，为你的情况下，你需要使用的实际图像。只需制作一张您需要的高度和1px宽的图像并使用它即可。它根本不会增加加载时间。这是获得背景宽度相应缩小的唯一方法。您可以限制背景颜色的大小。

.trending li:nth-child(1) { 
    background: red; 
    background-image: ; 
    background-size: 610px 20px; 
    background-position: 40px 0px; 
} 
.trending li:nth-child(2) { 
    background: blue; 
    background-image: ; 
    background-size: 421px 20px; 
    background-position: 40px 0px; 
} 
.trending li:nth-child(3) { 
    background: green; 
    background-image: ; 
    background-size: 300px 20px; 
    background-position: 40px 0px; 
} 
.trending li:nth-child(4) { 
    background: orange; 
    background-image: ; 
    background-size: 200px 20px; 
    background-position: 40px 0px; 
} 
.trending li:nth-child(5) { 
    background: purple; 
    background-image: ; 
    background-size: 100px 20px; 
    background-position: 40px 0px; 
}