3

次の HTML マークアップを検討してください。

<ul>
    <li>Short</li>
    <li>LOOOOOOOOOOOOOOOOOOONG</li>
</ul>

<table>    
    <tr>
        <td>Short</td>
    </tr>
    <tr>
        <td>LOOOOOOOOOOOOOOOOOOONG</td>
    </tr>
</table>

スタイル:

ul {
    display: table;
    margin: 0;
    padding: 0;
}

li {
    display: table-row;
}

td:hover, 
li:hover {
    background-color: gainsboro;
}

得られるのは、それぞれ短いセルと長いセルを持つ 2 つの同様のテーブルです。最初のテーブルのセルは、 http://www.w3.org/TR/CSS21/tables.html#anonymous-boxesに従って匿名セルです。Firefox または Chrome で表示すると、2 番目のテーブルは同じように動作します。表の行にカーソルを合わせると、その背景が灰色に変わります。Firefox は、ulマークアップを使用する CSS テーブルで同じ動作を示します。

ただし、Chrome では、最初のリスト エントリ (CSS テーブル モデルのテーブル行) の範囲には、長いエントリと同じくらい短いエントリを作成するために必要なパディングが含まれていないため、パディングの上にカーソルを置いても、何も変わりません。グレー。(2 番目の列を追加しても動作は変わりません。要素の範囲が 2 つの分離されたボックスになるよう<ul>に、要素はパディングを通して輝きます。<li>

次のjsfiddleでそれをいじることができます: http://jsfiddle.net/wvg8n/

Firefox と Chrome のどちらがここにあるのか疑問に思っています。Chrome というか Webkit エンジンにバグがあるのではないかと強く疑っています。

4

1 に答える 1

1

これは、chrome ブラウザーの display:table-row プロパティの問題であり、div などのブロック要素を使用して実現できます。

<ul>
    <li><div>Short</div></li>
    <li><div>LOOOOOOOOOOOOOOOOOOONG</div></li>
</ul>

<table>    
    <tr>
        <td>Short<</td>
    </tr>
    <tr>
        <td>LOOOOOOOOOOOOOOOOOOONG</td>
    </tr>
</table>
于 2013-07-04T12:24:20.927 に答える