Table Cell Relative Positioning

Demonstrates a Firefox issue where a relatively-positioned block fails to serve as the positional parent of its absolutely-positioned children.

HTML

<!--=>
    C'mon, Firefox!
  It even works on IE8.
        </!-->

<div class="container">
    <ul class="table">
        <li> <div class="icon"></div> </li>
        <li> <div class="icon"></div> </li>
        <li> <div class="icon"></div> </li>
        <li> <div class="icon"></div> </li>
    </ul>
</div>

CSS

* { margin:0; padding:0; }

.container { 
    position:relative; margin:10% auto; 
    width:96%; max-width:400px; 
    background:mistyrose; border:1px solid plum; }
.table { 
        display:table; width:100%; 
        border-spacing:10px; }
.table > li {
            position:relative; 
            display:table-cell; height:100px; 
            background:plum; }
.icon { 
                position:absolute; top:0; left:0; 
                width:20px; height:20px; background:purple; }