Question

更新

我在网站上添加了一个带有更多代码的jsfiddle。这个就像我描述的那样。我会尽快添加额外的代码，但样式表是1000多行，我不知道什么是相关的。

https://jsfiddle.net/noL14v9w/1/

原始帖子

我在IE10中。我有一个方形div，300px乘300px。在div里面，我有一些文字。如果我单击该文本，它将触发我的click事件。如果我单击div而不是文本，则不会触发点击事件。

当我设置CSS悬停类时会出现同样的问题。悬停规则仅在我将鼠标悬停在文本上时应用，而不是在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：

<!DOCTYPE html>
<html lang="en">
   ...

应用规则：

Answer 1

回答你的问题为什么它会发生：

是的，它是由height:100%与z-index:99结合而造成的 100％高度使navHolder成为整个窗口的大小，并且因为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 2

我会回答我自己的问题，但我不知道为什么会这样，所以如果你知道为什么会这样，请随时回答。我从jsfiddle中的height:100%中删除了#navHolder，但它确实有效。 behvaiour仍然非常奇怪，而不是我所期待的。也许它与z-index或position:fixed？

有关

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

Answer 3

您的#navHolder有height: 100%和z-index: 99。在此期间，您的.openStartAuditButton没有z-index和位置集。这意味着它位于覆盖整个窗口的#navHolder之下。作为解决方案，您可以设置

#navHolder{
   height: 26px;
}

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

3 个答案: