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>

Browser output

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

Answer 2

<ul>只能有<li>个孩子。您有<table>的{{1}}个孩子和<ul>的{{1}}孩子。

Answer 3

像Alohci所说，一个很可能的问题是你table内有ul个。

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

<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关闭一堆tr，并在ul内关注ul，我也在上面提到过。

Answer 4

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>

Answer 5

您无法使用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);
    }

DEMO http://jsfiddle.net/WCqLh/2/

这在IE 7+和chrome

中给出了相同的结果

IE Bug？或者我做错了什么？

5 个答案: