内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李跨浏览器的兼容性

回答

相关问题