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

考虑下面的HTML标记：匿名表格单元格的范围：Gecko或Webkit是正确的吗？

<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是否就在这里我有强烈的怀疑，浏览器，或者更确切地说，Webkit引擎是一个是越野车

来源

2013-03-17 Marc

我也怀疑。很难想出Chrome的行为可能的理由。 – Alohci 2013-03-18 00:49:18

我提交了一个错误报告：https://bugs.webkit.org/show_bug.cgi?id=112535 虽然它还没有被确认。 – Marc 2013-03-29 09:21:11

这是显示器的一个问题：表你可以使用像div这样的块元素来实现Chrome浏览器中的-row属性..

<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-04 12:24:20

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

回答

相关问题