JSFiddle 链接:http: //jsfiddle.net/2JUEJ
当我在 IE8 中打开页面时会发生什么,每当鼠标进入容器 DIV (class=tableRow) 时,hover
其第一个子 DIV (class=tile/wideTile/longTile) 的事件就会触发。在 Fx 中运行良好。我曾尝试event.preventDefault();
在父母的hover
活动中使用,但这并不能解决问题。有什么线索吗?
JSFiddle 链接:http: //jsfiddle.net/2JUEJ
当我在 IE8 中打开页面时会发生什么,每当鼠标进入容器 DIV (class=tableRow) 时,hover
其第一个子 DIV (class=tile/wideTile/longTile) 的事件就会触发。在 Fx 中运行良好。我曾尝试event.preventDefault();
在父母的hover
活动中使用,但这并不能解决问题。有什么线索吗?
float:left
与类display:table-cell
的组合不兼容。设置会自动将显示设置为阻止。看看 Chrome 或 Firebug/Firefox 中的计算样式。.tile
float
甚至可能是浮动表格单元格实际上导致浏览器生成匿名表格对象,从而导致 IE8 中的呈现错误。我猜 Chrome/Firefox 对不兼容性的解释不同。
删除display:table-row
会导致 IE 将单元格渲染得稍微好一点,因为当悬停在其他行子级上时,不再触发第一个单元格的悬停事件。然而,这破坏了预期的布局,因此我建议使用一种新方法。
首先删除所有display:table-*
规则,因为所有内容都是浮动的(正如我已经说过的那样display:block
),并且由于所有内容都是浮动的,因此每个table
都需要一个宽度,否则所有元素将彼此水平放置。例如我420px
在.table
课堂上试过。
见演示。
注意:就我个人而言,我会做得更好,完全删除浮动,只使用组合display:inline-block;vertical-align:top
和可能的一些定位,因为浮动通常需要额外的规则和/或标记来清除(而且我从来不喜欢 CSS 浮动!)
您可能有助于解释此答案的部分内容的其他问题:
尝试使用这种方式:
$(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");
});
});
尝试使用此脚本,看看是否有帮助。
事件从孩子传播到父母。在子 div hadlers 中尝试 event.stopPropagation()。