1

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

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

4

3 回答 3

2

float:left与类display:table-cell的组合不兼容。设置会自动将显示设置为阻止。看看 Chrome 或 Firebug/Firefox 中的计算样式。.tilefloat

甚至可能是浮动表格单元格实际上导致浏览器生成匿名表格对象，从而导致 IE8 中的呈现错误。我猜 Chrome/Firefox 对不兼容性的解释不同。

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

首先删除所有display:table-*规则，因为所有内容都是浮动的（正如我已经说过的那样display:block），并且由于所有内容都是浮动的，因此每个table都需要一个宽度，否则所有元素将彼此水平放置。例如我420px在.table课堂上试过。

见演示。

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

您可能有助于解释此答案的部分内容的其他问题：

于 2012-12-27T13:49:44.413 回答
0

尝试使用这种方式：

$(document).ready(function() {
    $(".title").hide();
    $(".tile, .wideTile, .longTile").hover(function() {
       $("div[class=title]", this).stop().slideDown("fast");
    }, function() {
       $("div[class=title]", this).stop().slideUp("fast");
    });
});

尝试使用此脚本，看看是否有帮助。

于 2012-12-27T11:38:57.867 回答
0

事件从孩子传播到父母。在子 div hadlers 中尝试 event.stopPropagation()。

于 2012-12-27T11:43:31.947 回答