1

我在 div 中有一个无序列表，每个列表项都有一个背景图像。但是，该列表未在 Internet Explorer 8 中正确显示。

渲染输出 http://img694.imageshack.us/img694/7204/screenshotjv.jpg

问题是列表的左侧和顶部有太多空间。以及每个列表项之间。我希望列表与其上方的图像部分完全齐平，因此左侧、顶部或每个项目之间没有空白。

HTML：

<div id="top">
    <div id="topimage">
        <center>
            <img src="image.jpg" alt="image"/>
        </center>
    </div>
    <ul class="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

CSS： 

#top { 
    width: 255px; 
    float:left; 
    margin:3px; 
}

#topimage {
    width: 245px;
    border:1px solid #bcc5c8;
    padding:3px;
}

.list li {
    background-image:url(../images/list_sub.jpg);
    width: 245px;
    height:23px;
    list-style:inside;
    list-style-image:url(../images/listarrow.gif);
    margin:0px;
    padding:0px;
}

我尝试将边距和填充设置为零，但这不起作用。我还检查以确保图像周围没有多余的空间。有什么建议么？

4

1 回答 1

0

以下是您可以调整的一些内容：

  1. 将列表项内容包装在跨度中，并将列表项箭头应用于跨度，给跨度一个比箭头 gif 的宽度稍大的 padding-left 值。

  2. 不要使用 list-style-image 属性，只需指定一个 list-style: none; 获得左对齐 x 浏览器。通常，您应该只对列表项使用背景图像属性而不是列表样式图像，但是由于您也有 li 的背景图像，因此您需要额外的跨度。

  3. 不要将填充应用于应用宽度和高度的相同元素。它们不会跨浏览器呈现。而是在父元素上指定宽度/高度并在内部包装元素上指定填充。

  4. 通常你应该避免 id 规则，它们非常具体，并导致不可重用的样式定义。它们使覆盖样式定义变得困难。

  5. 要使列表项相互接触，请确保在它们上指定的 line-height 等于或小于元素的高度。我认为列表项样式会修复它，但也要仔细检查此设置。

如果这不能解决您的问题，请发布指向背景图像的链接，我将模拟一个小示例。

于 2012-05-10T21:19:00.270 回答