Dfyjkt

I have a table that uses box-shadow when hovering on rows to display some styling. This was working fine until I discovered that in IE11 it not working.

The problem seems to be that using a z-index: -1 to avoid the td being above tr is not working as expected in IE11.

table td 
 position:relative;
 background-color: #EFEFEF;
 z-index: -1;

I have created a fiddle that works in chrome but not in IE11: https://jsfiddle.net/pjz43a52/8/

So my questions are:

• Is there any known issue with IE11 and z-index: -1? I found things related to z-index but not to this case specifically.


• How can I solve this? I tried different things but none of them working without breaking the current behavior which is to have the box-shadow on top of the td.

Any ideas?

<table> is cancer...

Although I don't know WHY exactly such behaviors happen... But yeah - that's compatibility issues and we've to hack around it, so if we re-use the same code you wrote before, but instead of using a <table> we will use only <div>, the result will be the same, but it will work on IE11 - I tested it for you!

.container 
 background-color: #fafafa;
 z-index: 0;


.table 
 position: relative;
 width: 100px;
 z-index: 1;
 border-spacing: 0px;
 border-bottom: 1px solid black;

.table .col 
 position:relative;
 background-color: #EFEFEF;
 z-index: -1;
 border-top: 1px solid black;
 border-right: 1px solid black;
 border-left: 1px solid black;

.table .row:hover 
 position: relative;
 box-shadow: 
 inset 5px 0 0 #dadce0, 
 inset -3px 0 0 #dadce0, 
 0 5px 2px 0 rgba(60,64,67,.3), 
 0 5px 3px 1px rgba(60,64,67,.15);

<div class="container">
 <div class="table">
 <div class="row">
 <div class="col">Some Value</div>
 </div>
 <div class="row">
 <div class="col">Some Value</div>
 </div>
 <div class="row">
 <div class="col">Some Value</div>
 </div>
 </div>
</div>

Since you are setting the Z-Index property, when you using F12 developer tools (using IE 11) to select the elements, you can only select the table elements, instead of the tr, so, it will not trigger the hover action. Screenshot as below:

To solve this issue, you could add the following CSS style:

table tr
 display:block; 

Then, when using F12 developer tools to select elements, we could select the table row. Thus, it will trigger the hover action.

The test sample as below:

<style type="text/css">

 table 
 position: relative;
 z-index: 1;
 border-spacing: 0px;
 border-bottom: 1px solid black;
 

 table td 
 border-top: 1px solid black;
 border-right: 1px solid black;
 border-left: 1px solid black;
 
 table tr
 display:block;
 

 .container 
 background-color: #fafafa;
 z-index: 0;
 

 table td 
 position: relative;
 background-color: #EFEFEF;
 z-index: -1;
 

 table tr:hover 
 position: relative;
 box-shadow: inset 5px 0 0 #dadce0, inset -3px 0 0 #dadce0, 0 5px 2px 0 rgba(60,64,67,.3), 0 5px 3px 1px rgba(60,64,67,.15);
 
</style>
<div class="container">
 <table>
 <tbody>
 <tr>
 <td>Some Value</td>
 </tr>
 <tr>
 <td>Some Value</td>
 </tr>
 <tr>
 <td>Some Value</td>
 </tr>
 </tbody>
 </table>
</div>

The result:

Is there any known issue with IE11 and z-index: -1?

This is likely not related to z-index directly, but due to the fact that CSS 2.1 specified that,

The effect of position:relative on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined. (https://www.w3.org/TR/CSS2/visuren.html#propdef-position)

This restriction has been lifted with the CSS 3 Positioning Module - but that doesn’t necessary mean, IE has kept up.

If you nest an additional element into your table cells and apply position, z-index and background to that, you should be able to get this basically working, https://jsfiddle.net/pjz43a52/10