[英]Weird z-index behaviour on Android 2.3
我想我可能在Android 2.3中遇到了另一個Z-index錯誤。 我們有這個小部件,它在所有主要的OS /瀏覽器組合上都呈現為:
這是我們正在使用的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和Samsung Galaxy S2等Android 2.3設備上,其最終結果如下:
誰能提出解決方案? 我已經嘗試了所有可以想到的CSS調整,但是似乎沒有任何解決辦法。
您需要做的是將.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;
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.