jquery - IE8 + jQuery : Parent DIV fires HOVER event of first child

Question

JSFiddle 链接:http://jsfiddle.net/2JUEJ

当我在 IE8 中打开页面时发生的情况是，每当鼠标进入容器 DIV (class=tableRow) 时，其第一个子 DIV (class=tile/wideTile/) 的 hover 事件longTile) 触发。在 Fx 中工作正常。我曾尝试在父级的 hover 事件中使用 event.preventDefault();，但这并不能解决问题。有什么线索吗？

Answer 1

.tile 类上的float:left 和display:table-cell 的组合is incompatible .设置 float 会自动将显示设置为block。查看 Chrome 或 Firebug/Firefox 中的计算样式。

float 表格单元格甚至可能导致浏览器生成 anonymous table objects这导致了 IE8 中的渲染错误。我猜 Chrome/Firefox 对不兼容性的解释不同。

删除 display:table-row 会导致 IE 稍微更好地渲染单元格，因为第一个单元格的悬停事件在悬停在其他行子项上时不再触发。然而，这会破坏预期的布局，因此我建议使用一种新方法。

首先删除所有 display:table-* 规则，因为所有内容都是 float 的(正如我已经说过的设置 display:block)并且因为所有内容都是 float 的，每个 table 将需要一个宽度，否则所有元素将彼此水平放置。例如，我在 .table 类上尝试了 420px。

See demo .

注意:就我个人而言，我会做得更好，完全删除 float ，只使用 display:inline-block;vertical-align:top 和可能的一些定位的组合，因为 float 通常需要额外的要清除的规则和/或标记(而且我从来不喜欢 CSS float !)

您可能有助于解释部分答案的其他问题:

• IE7: How to make TD float?
• float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
• Floating table cells in IE7