IE11 css表在链接悬停时崩溃。无法理解

Question

我遇到了最糟糕，最烦人的问题！这让我很生气！

它只发生在IE11中，但我也在IE11的另一台机器上尝试过它并没有发生!!

我有一个两列的页面布局，用css表设置。在左栏中，还有另一个100％高度的桌子，有两排，顶部有一个50％的高度和一个垂直对齐：顶部，下面有50％的高度和一个垂直对齐：底部，所以一些内容仍然位于页面顶部，有些内容仍位于底部。

右侧栏的高度可变，因为这是页面内容的位置，左侧栏必须调整大小以适应屏幕高度。

在firefox，chrome，IE8等中，一切正常。

但是在IE11中，如果将鼠标悬停在左手栏内的链接上，则布局会崩溃。

这是我想要实现的布局。

但如果将鼠标悬停在左栏中的一个链接上，就会发生这种情况！

这对我来说毫无意义，我无法解决它。

我尝试过使用CSS表格布局和“旧学校”表格，但我无法找到解决此问题的方法。

我目前的代码，只是几次尝试中的一种，是......

<div class="fullcontent-wrapper"><div class="fullcontent-tablerow">

<div class="left-wrapper"><div class="left">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%; height:100%;">
<tr><td style="width:350px; height:100%; vertical-align:top; background:#151515;">
left hand top content
</td></tr>
<tr><td style="width:350px; height:100%; vertical-align:bottom; background:#151515;">
left hand bottom content
</td></tr>
</table>
</div></div>

<div class="right-wrapper"><div class="right">
right hand content
</div></div>

</div></div>

我的CSS ......

.fullcontent-wrapper {
display: table;
width: 100%;
height: 80%;
}
.fullcontent-tablerow {
display: table-row;
width: 100%;
height: 100%;
}
.left-wrapper {
display: table-cell;
width: 350px;
height: 100%;
vertical-align: top;
overflow: hidden;
background: #151515;
}
.left {
width: 350px;
height: 100%;
margin-left: 0px;
}
.right-wrapper {
display: table-cell;
width: 100%;
height: 100%;
vertical-align: top;
}
.right {
width: 100%;
height: 500px;
}

如果有人可以提供任何形式的建议或解释，为什么会发生这种情况并对其进行修复，我将永远感激不尽！

或者，如果您对更好的代码有任何建议，以实现相同的所需页面布局，那么我也很乐意尝试！

非常感谢！