Question

我正在尝试使用表单输入复选框和带有图标的标签创建下拉菜单，因此当用户单击图标时，菜单会根据复选框的选中状态打开或关闭。

除了IE之外，它适用于所有浏览器。有趣的是，如果我点击图标图像旁边的标签内的文字，它会起作用，但是当点击图片图标本身时却不行。

下面是此类菜单的最小示例。任何关于为什么这不仅适用于IE（甚至更新的版本）的提示将不胜感激。

<html lang="en">
<head>
<title>Menu Test</title>
<style>
.menu-items {
	position: absolute;
	border-color: #cccccc;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
	top: 40px;
}

#navigation-menu .menu-items {
	display: none;
}

#navigation-button:checked + .menu-items {
  display: inline-block;
}

#navigation-menu input[type="checkbox"], 
#navigation-menu ul span.drop-icon {
	display: inline;
}
</style>

</head>
<body>

<form>
 <div id="navigation-menu">
  <input type="checkbox" id="navigation-button">
  <div class="menu-items">
   <div>Option 1</div>
   <div>Option 2</div>
  </div>
  <label for="navigation-button" id="navigation-label">
   <span class="drop-icon">
    X<img src="http://uxrepo.com/static/icon-sets/dripicons/png32/24/000000/menu-24-000000.png" width="24" height="24">X
   </span>
  </label>
 </div>
</form>

</body>
</html>

Answer 1

为IE添加以下解决方法可以解决问题：

label{
        display: inline-block;
    }
    label img{
        pointer-events: none;
    }

＆＃13;

<html lang="en">
<head>
<title>Menu Test</title>
<style>
.menu-items {
	position: absolute;
	border-color: #cccccc;
	border-style: solid;
	border-width: 1px;
	padding: 4px;
	top: 40px;
}

#navigation-menu .menu-items {
	display: none;
}

#navigation-button:checked + .menu-items {
  display: inline-block;
}

#navigation-menu input[type="checkbox"], 
#navigation-menu span.drop-icon {
	display: inline;
}
label{
    display: inline-block;
}
label img{
    pointer-events: none;
}
</style>

</head>
<body>

<form>
 <div id="navigation-menu">
  <input type="checkbox" id="navigation-button">
  <div class="menu-items">
   <div>Option 1</div>
   <div>Option 2</div>
  </div>
  <label for="navigation-button" id="navigation-label">
   <span class="drop-icon">
    X<img src="http://uxrepo.com/static/icon-sets/dripicons/png32/24/000000/menu-24-000000.png" width="24" height="24">X
   </span>
  </label>
 </div>
</form>

</body>
</html>

＆＃13;

请注意，您在行#navigation-menu ul span.drop-icon {

中有必要的ul

单击标签内的图像图标不会切换IE上的复选框状态

1 个答案: