UPDATE
I added a jsfiddle with a little more code from the site. This one works like I'm describing. I would of added the extra code sooner but the stylesheet is 1000+ lines and I didn't know what was relevant.
/
ORIGINAL POST
I'm in IE10. I have a square div, 300px by 300px. Inside the div, I have some text. If I click the text, it fires my click event. If I click the div but not on the text, it doesn't fire the click event.
The same issue occurs when I set a CSS hover class. The hover rules only get applied when I hover over the text, not anywhere else in the 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">
...
Applied Rules:
UPDATE
I added a jsfiddle with a little more code from the site. This one works like I'm describing. I would of added the extra code sooner but the stylesheet is 1000+ lines and I didn't know what was relevant.
https://jsfiddle/noL14v9w/1/
ORIGINAL POST
I'm in IE10. I have a square div, 300px by 300px. Inside the div, I have some text. If I click the text, it fires my click event. If I click the div but not on the text, it doesn't fire the click event.
The same issue occurs when I set a CSS hover class. The hover rules only get applied when I hover over the text, not anywhere else in the 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">
...
Applied Rules:
Share Improve this question edited Nov 17, 2015 at 21:14 Ben Lorantfy asked Nov 17, 2015 at 20:27 Ben LorantfyBen Lorantfy 9531 gold badge7 silver badges19 bronze badges 11- It seems to be working for me on this jsfiddle, am I missing something? – Scott Commented Nov 17, 2015 at 20:30
- what do you mean with "not anywhere else in the div.".. – ScaisEdge Commented Nov 17, 2015 at 20:30
- @scaisEdge I mean anywhere that isn't text. The click only fires if I click the text. If I click the div but not on the text, it doesn't fire. It has a set width and height so the text doesn't fill the div. – Ben Lorantfy Commented Nov 17, 2015 at 20:34
- @ScottKaye That fiddle works for me too, I think it could be something else on my site doing it but I have no idea what. I was hoping someone knew a weird quick of IE that caused this and knew the fix. – Ben Lorantfy Commented Nov 17, 2015 at 20:35
- Seems to work for me even on IE 9 (IE8 jsFiddle stops working..). – Niki van Stein Commented Nov 17, 2015 at 20:37
3 Answers
Reset to default 3To answer your question why it happens:
Yes, it is caused by height:100%in bination with z-index:99.
The 100% height makes the navHolder the size of the plete window, and because the navHolder has a high z-index (99) it will be on top of all the elements.
Removing the 100% height, will make sure the navHolder does not overlap the elements below anymore, and makes your click work.
Why it did work on the text, is a bit weird (in chrome it does not).
edit
I found out why it does weird in IE 10: http://alex.leonard.ie/2013/01/27/ie-bug-text-ignores-z-index-of-higher-elements/.
It is a known bug.
I'll answer my own question but I don't know why it works so feel free to answer if you know why this happened. I removed the height:100% from the #navHolder in the jsfiddle and it works. The behvaiour is still really weird and not something I would expect. Maybe it has something to do with the z-index or position:fixed?
Fixed jsfiddle: https://jsfiddle/noL14v9w/2/
Your #navHolder has height: 100% and z-index: 99. In the meantime your .openStartAuditButton doesn't have a z-index and position set. This means that it is under your #navHolder which covers the whole window.
As a solution you could set
#navHolder{
height: 26px;
}
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744896037a4599702.html
评论列表（0条）