单击仅在单击 div 文本时有效,而不是 div 的其余部分
Click only works when clicking div text, not the rest of the div
更新
我添加了一个 jsfiddle,其中包含来自站点的更多代码。这个就像我描述的那样工作。我会尽快添加额外的代码,但样式表有 1000 多行,我不知道什么是相关的。
https://jsfiddle.net/noL14v9w/1/
原版POST
我在 IE10 中。我有一个正方形 div,300 像素 x 300 像素。在 div 中,我有一些文字。如果我单击文本,它会触发我的单击事件。如果我单击 div 但不单击文本,则不会触发单击事件。
当我设置 CSS 悬停 class 时出现同样的问题。悬停规则仅在我将鼠标悬停在文本上时应用,而不是 div.
中的其他任何地方
HTML:
<div class="openStartAuditButton" onclick="alert('WTF');">asdf</div>
CSS:
.openStartAuditButton{
height:300px;
width:300px;
margin-top:20px;
font-size:24px;
background-color:grey;
color:white;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.openStartAuditButton:hover{
background-color:lightgrey;
}
/* I also have box sizing set on all elements, but removing this does nothing: */
* {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
文档类型:
<!DOCTYPE html>
<html lang="en">
...
应用规则:
我会回答我自己的问题,但我不知道为什么会这样,所以如果您知道为什么会这样,请随时回答。我从 jsfiddle 中的 #navHolder
中删除了 height:100%
并且它有效。行为仍然很奇怪,不是我所期望的。也许它与 z-index
或 position:fixed
?
有关
修复了 jsfiddle:https://jsfiddle.net/noL14v9w/2/
回答你的问题为什么会发生:
是的,这是由 height:100%
和 z-index:99
共同造成的。
100% 的高度使 navHolder
成为完整 window 的大小,并且由于 navHolder
具有较高的 z-index (99),它将位于所有元素之上。
删除 100% 高度,将确保 navHolder 不再与下面的元素重叠,并使您的点击有效。
为什么它对文本起作用,有点奇怪(在 chrome 中不起作用)。
编辑
我发现了为什么它在 IE 10 中很奇怪:http://alex.leonard.ie/2013/01/27/ie-bug-text-ignores-z-index-of-higher-elements/。
这是一个已知错误。
您的 #navHolder
有 height: 100%
和 z-index: 99
。与此同时,您的 .openStartAuditButton
没有设置 z-index 和位置。这意味着它在您的 #navHolder
之下,涵盖了整个 window。
作为解决方案,您可以设置
#navHolder{
height: 26px;
}
更新
我添加了一个 jsfiddle,其中包含来自站点的更多代码。这个就像我描述的那样工作。我会尽快添加额外的代码,但样式表有 1000 多行,我不知道什么是相关的。
https://jsfiddle.net/noL14v9w/1/
原版POST
我在 IE10 中。我有一个正方形 div,300 像素 x 300 像素。在 div 中,我有一些文字。如果我单击文本,它会触发我的单击事件。如果我单击 div 但不单击文本,则不会触发单击事件。
当我设置 CSS 悬停 class 时出现同样的问题。悬停规则仅在我将鼠标悬停在文本上时应用,而不是 div.
中的其他任何地方HTML:
<div class="openStartAuditButton" onclick="alert('WTF');">asdf</div>
CSS:
.openStartAuditButton{
height:300px;
width:300px;
margin-top:20px;
font-size:24px;
background-color:grey;
color:white;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.openStartAuditButton:hover{
background-color:lightgrey;
}
/* I also have box sizing set on all elements, but removing this does nothing: */
* {
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
文档类型:
<!DOCTYPE html>
<html lang="en">
...
应用规则:
我会回答我自己的问题,但我不知道为什么会这样,所以如果您知道为什么会这样,请随时回答。我从 jsfiddle 中的 #navHolder
中删除了 height:100%
并且它有效。行为仍然很奇怪,不是我所期望的。也许它与 z-index
或 position:fixed
?
修复了 jsfiddle:https://jsfiddle.net/noL14v9w/2/
回答你的问题为什么会发生:
是的,这是由 height:100%
和 z-index:99
共同造成的。
100% 的高度使 navHolder
成为完整 window 的大小,并且由于 navHolder
具有较高的 z-index (99),它将位于所有元素之上。
删除 100% 高度,将确保 navHolder 不再与下面的元素重叠,并使您的点击有效。
为什么它对文本起作用,有点奇怪(在 chrome 中不起作用)。
编辑
我发现了为什么它在 IE 10 中很奇怪:http://alex.leonard.ie/2013/01/27/ie-bug-text-ignores-z-index-of-higher-elements/。
这是一个已知错误。
您的 #navHolder
有 height: 100%
和 z-index: 99
。与此同时,您的 .openStartAuditButton
没有设置 z-index 和位置。这意味着它在您的 #navHolder
之下,涵盖了整个 window。
作为解决方案,您可以设置
#navHolder{
height: 26px;
}