匿名表格单元格的范围：Gecko或Webkit是对的吗？

Question

考虑以下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;
}

您将获得两个类似的表，每个表都有一个短的和一个长单元格。 根据http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes ，第一个表格的单元格是匿名单元格。 在Firefox或Chrome中显示时，第二个表的行为相同。 当您将鼠标悬停在表格行上时，其背景将变为灰色。 Firefox显示与使用ul标记的CSS表相同的行为。

但是，在Chrome中，第一个列表条目（CSS表模型中的表格行）的范围不包括短条目所需的填充，只要长条目，所以当您将鼠标悬停在填充上时，没有任何转动灰色。 （当您添加第二列时，行为甚至不会改变， <ul>元素将通过填充闪烁，以便<li>元素的范围将是两个分隔的框。

您可以在以下jsfiddle中使用它： http ： //jsfiddle.net/wvg8n/

我想知道Firefox或Chrome是否就在这里。 我强烈怀疑Chrome，或者更确切地说是Webkit引擎是错误的。

Answer 1

这是display的问题：chrome浏览器中的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>