html - 浏览器错误？还是我做错了什么？

Question

我有以下代码:

CSS

ul li {
    width: 100%;
    padding 0;
    margin 0;   
}
    ul.step li{
    list-style-image: url(TID05.png);
    background: #5E5E5E;
}

    ul.substep li{
    list-style-image: url(TID07.png);
background: #A6A6A6;
}

table{
table-layout: fixed; 
width: 100%;
}
td.bgImage{
    width:15px;
    background-repeat: no-repeat;
    background-image: url(TID09.png);
}

HTML

<ul class="step">
<li>1</li>
<ul class="substep">
    <li>1</li>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
    <li>2</li>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
    <li>3</li>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
    <li>4</li>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></tr></table>
    </ul>
</ul>

我希望在 Internet Explorer 上获得与在 Firefox 上相同的结果。有人可以帮忙吗？我的 HTML 代码有问题吗？还是 Internet Explorer 中存在错误？

Answer 1

您的 HTML 标记已损坏。当你把东西放在列表中时，它应该放在 li 元素中:

<ul class="step">
  <li>1
    <ul class="substep">
      <li>1
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></table>
      </li>
      <li>2
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></table>
      </li>
      <li>3
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></table>
      </li>
      <li>4
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</tr></table>
      </li>
    </ul>
  </li>
</ul>

损坏的 HTML 的典型情况是 htat 浏览器将使用不同的方式尝试修复标记。一些浏览器倾向于添加更多元素，而另一些浏览器则倾向于重新排列元素。

提示:使用 W3C HTML Validation Service检查您的代码。