单击仅在单击 div 文本时有效，而不是 div 的其余部分

Question

更新

我添加了一个 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">
   ...

应用规则：

Answer 1

我会回答我自己的问题，但我不知道为什么会这样，所以如果您知道为什么会这样，请随时回答。我从 jsfiddle 中的 #navHolder 中删除了 height:100% 并且它有效。行为仍然很奇怪，不是我所期望的。也许它与 z-index 或 position:fixed?

有关

修复了 jsfiddle：https://jsfiddle.net/noL14v9w/2/

Answer 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/。这是一个已知错误。

Answer 3

您的 #navHolder 有 height: 100% 和 z-index: 99。与此同时，您的 .openStartAuditButton 没有设置 z-index 和位置。这意味着它在您的 #navHolder 之下，涵盖了整个 window。作为解决方案，您可以设置

#navHolder{
   height: 26px;
}

单击仅在单击 div 文本时有效，而不是 div 的其余部分

Click only works when clicking div text, not the rest of the div

javascript

html

css

internet-explorer-10