IE水平列表:最后一个元素是神秘偏移的

时间:2011-08-05 23:49:04

标签: html css internet-explorer

我有一个问题,IE 9(可能还有其他版本)没有正确显示我的水平列表。如您所见,最右边的元素被向下推了一下。

HTML:

<div id="contentBlock">
    <ul id="Bubbles">
        <li id="First">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...
        </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip...
        </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip... 
        </li>
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip... 
        </li>
    </ul>
</div>

CSS:

ul#Bubbles li {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    margin:0px;
    margin-top:6px;
    margin-left:6px;
    padding:5px;
    background: #444; /* for non-css3 browsers */
    background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#333)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #555,  #333); /* for firefox 3.6+ */
    background: linear-gradient(#555, #333);
    background: -ms-linear-gradient(#555, #333);
    -pie-background: linear-gradient(#555555, #333333);
    float:left;
    width:225px;
    height:250px;
    font-size:12px;
    padding-top:3px;
    list-style-type:none;
    display:inline;
    position:static;
    /*behavior:url(PIE.php);*/
}

#Bubbles {
    width:956px;
    margin:0px;
    display:inline;
}

ul#Bubbles li#First {
    margin-left:0px;
    width:223px;
}

#contentBlock{
    height:270px;
}

我正在使用IE3版本的CSS3PIE作为背景渐变,但暂时禁用这些项目。任何帮助表示赞赏。感谢。

1 个答案:

答案 0 :(得分:0)

通过删除列表周围的div来解决问题。感谢。