0

我有以下代码：

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 中是否存在错误？

4

5 回答 5

3

您的 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检查您的代码。

于 2012-10-23T07:14:39.720 回答
2

<ul>只能生<li>孩子。你有<table>a的孩子<ul>和 a 的<ul>孩子<ul>。

于 2012-10-23T07:10:04.617 回答
2

就像 Alohci 所说，一个很可能的问题是你table的 s 中有uls。

这样的事情会更容易接受：

<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</td></tr></table>
    </li>
    <li>2
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</td></tr></table>
    </li>
    <li>3
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</td></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</td></tr></table>
    </li>
    <li>4
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</td></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</td></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</td></tr></table>
        <table><tr><td class="bgImage"></td><td>Lorem</td><td>ipsum</td><td>foo</td><td>bar</td></tr></table>
    </li>
    </ul>
    </li>
</ul>

td您还试图用trs 和 a 来关闭一堆 s，ul我在ul上面也提到过。

于 2012-10-23T07:14:18.693 回答
1 
Write your HTML as - 

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

    </ul>
</li>
</ul>
于 2012-10-23T07:13:19.327 回答
1

您不能使用 li 标签之外的任何标签。

添加 span 标签以使数字作为标题并相应地编写 css。

HTML

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

CSS

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

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

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

演示 http://jsfiddle.net/WCqLh/2/

这在 IE 7+ 和 chrome 中给出了相同的结果

于 2012-10-23T07:16:38.550 回答