內UL李跨瀏覽器的兼容性

的絕對定位我有這樣的事情：內UL李跨瀏覽器的兼容性

<div style="width:1300px"> 
    <ul class="ul-length ul-textalign"> 
    <li class="li-horizontal"> A </li> 
    <li class="li-horizontal"> B </li> 
    <li class="fillgap"/> 
    </ul> 
</div>

我想有最後李填補一些背景行的其餘部分。我想避免一個代碼，指定li fillgap的寬度，取決於以前lis的長度。因此，我想在絕對定位這最後的李，並將其採取的UL的整個寬度：

.fillgap { 
    position:absolute; 
    width:1300px; /* for some reason, width:100% is longer than the div width... */ 
    z-index:0; 
} 

.ul-length { 
    with:100%; 
} 

.ul-textalign { 
    text-align:left; /* fix for IE, prevents the absolute li from beginning at the center */ 
} 

.li-horizontal { 
    float:left; 
}

最簡單的方式對整個寬度的背景可能是設定的背景ul，但我無法做到這一點，因爲它不符合預期的設計。我需要能夠與lis做到這一點。而我的上面的代碼導致在IE中的一個問題：li fillgap似乎保留在頁面流中，因爲它放在旁邊的前一個lis，而不是在ul的開頭...

任何想法？

這裏是預期的（在歌劇）結果： enter image description here

下面是結果在IE： enter image description here

來源

2012-08-02 Lyth

添加position: relative到.ul-length。這使得position: absolute在相對於.ul-length。

，讓你改變從1300px的width到100%;

這裏有一個小提琴：http://jsfiddle.net/joplomacedo/5vykm/

不過，我不明白爲什麼你需要添加position: absolute到li的。如果你想讓它保持在原來的位置，那爲什麼position: absolute呢？

來源

2012-08-02 12:55:20 banzomaikaka

嗨，謝謝你的回答。我加了這個，但它並沒有改變我的主要問題。檢查我的帖子，我添加了圖片。 – Lyth 2012-08-02 13:38:53

嗯，是的，我忘記了水平放置我的事實。 – Lyth 2012-08-02 13:44:07

好的...它對我來說也能很好地工作。但在我的應用程序中不起作用。我認爲在一些css文件中存在一些不兼容... – Lyth 2012-08-02 14:07:09

.ul-length li{ 
     z-index:2; 
     position:relative; 
    } 
.ul-length li.fillgap { 
    background: none repeat scroll 0 0 red; 
    display: block; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
    z-index: 1; 
    top:0; 
    left:0 
} 

    .ul-length { 
     with:100%; 
     position:relative; 
    }

來源

2012-08-02 12:55:40 Jane

內UL李跨瀏覽器的兼容性

回答

相關問題