Invisible div over div does not work in IE8

I'm trying to create an invisible div, over the facebook comments plugin in order to disable the plugin's functionality in an Editor View. This invisible div works in all browsers except IE8. How can I fix this?

HTML:

<div id="container">
   <div id="coveriframe"></div>   
    <div data-bind-component="fbml: fbml">(RENDER JS COMMENTS VIA KO)</div>
</div>

Try in IE8:

http://jsfiddle.net/pkbz4/19/

• The above code works in ALL other Major browsers. WTF Microsoft?

Stylesheet:

    #container {
        width: 100%;
        height: 100%;
        position: relative;
    }

    #navi, 
    #coveriframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #coveriframe {
        z-index: 10;
   }