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

Stack Overflow用户

提问于 2015-02-26 06:20:25

回答 1查看 1.9K关注 0票数 1

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

除了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>

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-02-26 07:36:22

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

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

<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>

请注意，在行#navigation-menu ul span.drop-icon {中有不必要的ul

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28735767

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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