I have a custom gantt chart which has a bar and a label on it. The bar of the chart is a a combination of small div and the label for the bar is placed in the first div.
I have created a rough version to simulate this here jsfiddle.I think the issue is due to pointer-event:none; not supported in IE. I have set the following property in CSS for label
<html>
<head>
<style>
.mylabel {
pointer-events: none;
left: 40px;
position: absolute;
clear: both;
display: inline-block;
overflow: hidden;
white-space: nowrap;
z-index: 2;
}
.rowDiv {
float:left;
width:30px;
height:30px;
z-index: -1;
}
</style>
</head>
<script>
function div1Click(){alert("Div1 clicked");}
function div2Click(){alert("Div2 clicked");}
function div3Click(){alert("Div3 clicked");}
</script>
<body>
<div style="width:95px;height:35px;overflow-y:hidden;z-index: -1;">
<div id="Div1" class="rowDiv" style="background-color:#b0c4de;" onClick="div1Click()"><label class="mylabel" >DiV 123</label></div>
<div id="Div2" class="rowDiv" style="background-color:#FF0000" onClick="div2Click()"></div>
<div id="Div3" class="rowDiv" style="background-color:#00FF00" onClick="div3Click()"></div>
</div>
</body>
</html>
On the click of each div it should open a popup corresponding to that div. However the label from the first div spans across all the other div. When i click on the label anywhere in div 2 or div 3, the click event for the first div is triggered instead of div 2 or Div 3.
The issue exist only in IE 10 and it works fine in Chrome.
Is there any way to make this work in IE 10.
Thanks in advance
