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

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

然而，在 Chrome 中，第一个列表条目（CSS 表格模型中的表格行）的范围不包括使短条目与长条目一样长所需的填充，因此当您将鼠标悬停在填充上时，没有任何变化灰色的。（当您添加第二列时，行为甚至不会改变，<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 回答