Question

我正在尝试设计一个通过单击按钮触发的菜单。当用户单击该按钮时，将运行一个单击处理程序，该按钮将该类添加到该按钮，使用兄弟选择器的CSS规则使该菜单可见。除了IE 7和8之外，它在我测试的所有浏览器中都能正常工作。

在IE 7和8中，我遇到了这些问题：

点击按钮切换课程，但菜单不会出现或消失，直到我将鼠标移动一点点。
菜单根本不起作用，除非我有一个CSS：菜单子项的悬停声明。无论我在宣言中放什么，或者我放了什么都没关系，但如果没有它，菜单就不会出现。

有谁能告诉我为什么会这样，我能做些什么呢？我想在菜单中添加一个单独的类，但我想知道是否有更简单的修复或解决方法。这是我的代码：

<!DOCTYPE html>
<html><head>
<title>IE selector test</title>
<style type="text/css">
button {
  border: outset 1px #eeeeee;
}
button.active {
  border-style: inset;
}
.menu {
  display: none;
  border: solid 1px #888888;
}
button.active ~ .menu {
  display: block;
}
.menu > :hover {
  /* For some reason, the menu doesn't work at all without this declaration */
}
</style>
</head>
<body>
<button type="button" id="menuButton">Menu</button>
<div class="menu">
  <div>option</div>
</div>
<script>
document.getElementById("menuButton").onclick = function() {
  if (this.className) {
    this.className = "";
  } else {
    this.className = "active";
  }
};
</script>
</body>
</html>

您也可以在http://jsfiddle.net/QKqpn/进行测试。

Answer 1

你可以通过强制页面重绘来解决这个问题：

document.body.className = document.body.className;

请参阅http://jsfiddle.net/uGW4M/

顺便说一句，在你的情况下，你可以使用+（一个直接兄弟）组合器而不是更常见的~（所有后续兄弟姐妹）：

button.active + .menu {/* ... */}

将Click处理程序与CSS同级选择器结合使用时，IE中出现奇怪的行为

1 个答案: