ie11：为什么桌面高度不像其他浏览器那样工作？

Question

我不知道如何使我的代码尽可能地使其像其他浏览器一样工作。基本上，td持有一个div作为图像背景以适合第一个td并且具有与tr相同的高度。

使用IE浏览器，我无法正确布局。

以下是代码段（适用于safari＆amp; chrome，移动设备和桌面设备）：

<table class="tableBlackOrange">
    <tbody>
        <tr>
            <td class="key textOutline">
                <div class="image"></div>
                <div class="cut-arrow-right"></div>
                <p>Taupin</p>
            </td>
            <td>
                <div>
                    <div class="disk"></div>
                </div>
            </td>
        </tr>

div是位置：绝对位于td位置：relative。

我们应该在IE上获得什么：

小提琴就在那里：http://jsfiddle.net/stephanedeluca/rp8k2o6n/