Firefox：div：hover只在第一行工作

Question

• 我有一个非常简单的表，其中包含一个div，它在翻转时显示一些较小的内部div。只是简单的旧CSS2，没什么特别的。

• 在Chrome＆amp; Safari浏览器。

• 但是，在Firefox 8中，：hover仅适用于第一个TR - 而第二个TR 完全相同。

  < / LI>

• 代码没有验证错误。

• 任何可能导致此行为的想法？

• 在http://jsfiddle.net/gNBSc/9/

上工作jsfiddle

Answer 1

我相信您的问题与此CSS定义有关，您将所有“悬停”项目定位到绝对值并定义前0px。

div.hover {
    height:150px;
    position:absolute;
    top:0px;
    width:150px;
}

只需将定位更改为relative即可解决您遇到的问题，然后您可以定位“某些文字”。或者重新考虑你的结构。

div.hover {
    height:150px;
    position:relative;
    top:0px;
    width:150px;
}

但具体而言，对于你的问题，上述课程是罪魁祸首。

Answer 2

Firefox并不善意将position:relative应用于tr自己（我不知道为什么，没有时间查找）。这会影响所有您的div.hover元素堆叠在第一个表格行上（请参阅here，添加边框以使其清晰）。

作为一种变通方法，您可以将每个tr的内容包含在div中，并将position:relative应用于div而不是tr。