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;
}

你会得到两个相似的表，每个表都有一个短的和一个长单元格。根据{{3}}，第一个表的单元格是匿名单元格。在Firefox或Chrome中显示时，第二个表的行为相同。当您将鼠标悬停在表格行上时，其背景将变为灰色。 Firefox使用ul标记的CSS表显示相同的行为。

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

您可以在以下jsfiddle中使用它：http://www.w3.org/TR/CSS21/tables.html#anonymous-boxes

我想知道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>

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

1 个答案: