Question

我有一个<div>，里面有两个浮动元素。我正在使用jQuery将click事件处理程序附加到此<div>。当我单击两个浮动元素中的一个时，只会调用该处理程序。 <div>内的空白区域不起作用。

以下是标记的样子：

<div class="wrapper">
  <h4>Some lovely header text here</h4>
  <img src="images/plus.png"/>
  <div style="clear: both;"/>
</div>

这是我的Javascript（我也在使用其他一些活动）：

// Expand scenarios when clicked on
scenario_header.live("click", function() { 
  $(this).toggleClass("expanded");
  $("+ div", this).slideToggle();
});

// Toggle hover class when hovering
scenario_header.live("mouseover", function() {
  $(this).toggleClass("hover");
});
scenario_header.live("mouseout", function() {
  $(this).toggleClass("hover");
});

这在Firefox中完美运行。有什么想法吗？

Answer 1

我想你必须应用一些额外的CSS，以便包装器DIV真正包装它的孩子。这样的事情应该足够了：

div {
 overflow: hidden;
 display: inline-block; /* weird stuff, but it's needed for IE6 */
}
div {
 display: block; /* needed to reset display for non IE6 browsers */
}

在IE6上单击具有两个浮动元素的div的事件

1 个答案: