IE7的CSS问题？

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和类相同）。 这样，标记不再无效。 list元素在这里并不是必需的，因为列表中的每个项目都很大，而且是块级的。 而且，与实际重新排列列表相比，这将是更快的修复方法，因此它是有效的（这也将需要大量的CSS更新）

希望有帮助！

Answer 2

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

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

或考虑将div从ul中移出。