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>

ブラウザ出力

InternetExplorerでもFirefoxと同じ結果が必要です。誰か助けてもらえますか？HTMLコードに何か問題がありますか？または、Internet Explorerにバグがありますか？

4

5 に答える 5

2

<ul><li>子供しか持てません。<table>の子<ul>と a の<ul>子がいます<ul>。

于 2012-10-23T07:10:04.617 に答える
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以降とクロムで同じ結果が得られます

于 2012-10-23T07:16:38.550 に答える
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 に答える