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

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

它在除IE之外的所有浏览器中都能很好地工作。有趣的是，如果我单击图标图像旁边标签内的文本，它就能工作，但在单击图像图标本身时却不能工作

下面是此类菜单的一个简单示例。如果您能提供任何提示，说明为什么这不适用于IE（甚至是更新版本），我们将不胜感激

菜单测试
.菜单项{
位置：绝对位置；
边框颜色：#中交；
边框样式：实心；
边框宽度：1px；
填充：4px；
顶部：40px；
}
#导航菜单。菜单项{
显示：无；
}
#导航按钮：选中+。菜单项{
显示：内联块；
}
#导航菜单输入[type=“checkbox”]，
#导航菜单ul span.下拉图标{
显示：内联；
}
选择1
选择2
XX

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

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

菜单测试
.菜单项{
位置：绝对位置；
边框颜色：#中交；
边框样式：实心；
边框宽度：1px；
填充：4px；
顶部：40px；
}
#导航菜单。菜单项{
显示：无；
}
#导航按钮：选中+。菜单项{
显示：内联块；
}
#导航菜单输入[type=“checkbox”]，
#导航菜单span.下拉图标{
显示：内联；
}
标签{
显示：内联块；
}
标签img{
指针事件：无；
}
选择1
选择2
XX

不，它不适用于IE11@AlexanderDayan我的错。。我点击了复选框而不是图片。是的，它在IE中不起作用，就是这样。我不知道图像可以接收事件而不会将它们传递给父元素，至少在InternetExplorer中是这样。该样式也是以前编辑的剩余样式。谢谢你解决了这个问题。