Question

我在IE7中显示以下页面时遇到问题。

每个产品都有：

带有背景图片的顶部的

<div> <li>为中间的背景图片。
<div>底部带有背景图片。

<li>有一个背景重复：repeat-y;，它似乎并没有停在正确的位置。如果您没有IE7，请复制以上链接并使用此页面查看：

提前谢谢，
逾越节

Answer 1

你的标记无效，IE7正在重新排列它，也许其他浏览器正在做出更好的“最佳猜测”。

<ol>
    <div /><!-- top -->
    <li />
    <div /><!-- bottom -->
</ol>

正在重新格式化为：

<ol>
    <li>
        <div /><!-- top -->
        <div /><!-- bottom -->
    </li>
</ol>

你必须重新安排HTML;只有一个LI可以是OL的孩子，而不是DIV（或SPAN或H2，它们也是OL的直接后代）。

我建议将UL和LI更改为DIV（保持ID和类相同）。这样标记就不再无效了。这里列表元素不是必需的，因为列表中的每个项目都非常大，而且是块级别的。这也是一个比实际重新排列列表更快的解决方案，因此它是有效的（这也需要大量的CSS更新）

希望有所帮助！

Answer 2

您可以将ul内的div更改为li。

<ul>
    <li class="top"></li>
    <li> item here </li>
    <li class="bottom"></li>
</ul>

或考虑将你的div移出ul。