html - 匿名表格单元格的范围 : Is Gecko or Webkit right?

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:table-row 属性在 chrome 浏览器中的一个问题，你可以使用像 div 这样的 block 元素来完成。

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

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