Internet Explorer错误的高度和不正确的渲染

Question

我有以下标记，在IE和Chrome / Firefox中呈现的方式不同：

<div id="test" style="width: 200px; height: 300px; display: table; position: absolute; background-color:red;">
    <div style="position: relative; top: -300px;">
        <div style="height: 261px; display: table;">
            <div style="display: table-cell;">
            </div>
        </div>
    </div>
</div>

以下是一个示例：http://jsfiddle.net/d1kvahty/ 我无法从此标记中删除任何内容，但我需要在所有浏览器中以相同方式呈现此内容。是否有任何js或html hack可以用于IE告诉他在Chrome中渲染这个标记？