Html td跨浏览器问题中的Div

我在一个td里面有一个div，它在Chrome和Firefox中渲染得很好，但在IE11中它的高度太短了。 下面是一把小提琴，它说明了这个问题：

以下是html：

<table class="dlts">
<tr class="dltrs">
<td class="dltds"><asp:Label ID="Label1" ForeColor="Black" Font-Bold="true" Font-Size="medium" runat="server" Text="One" ></asp:Label></td>
<td class="dltds"><asp:Label ID="_lbl" ForeColor="Black" Font-Bold="true" Font-Size="medium" runat="server" Text="Two" ></asp:Label></td>
<td class="dltds"><div id="adiv" class="ytdc" runat = "server"></div></td>
</tr>
</table>

---

具有div的td没有像我在IE11中所想的那样呈现——它太短了。我尝试使用span而不是div（运气不佳），并尝试了不同的td风格。更改td上的显示样式为我提供了正确的高度，但在表格单元格之间添加了额外的填充。有人知道为什么在IE中使用表格单元格显示不能像预期的那样工作，以及可能的解决方法是什么吗？

我删除了

边距
和
填充，尽管它们被设置为
0

我删除了
边框折叠
，并将
cellspacting=“0”
添加到表中

这个JSFIDLE在我的IE 11和Chrome浏览器中工作。现在唯一有点不同的是，单元格之间的垂直线比边缘更粗。自己检查一下

如果这对你来说是一个问题，我会寻找另一个解决方案（尽管它不会困扰我）


亲切的问候
看起来很棒，谢谢。我还发现我可以通过将高度从一个百分比改为一个固定的数字来实现这一点；i、 e.20px（这听起来像IE在这方面是有缺陷的）。边界问题不是一个问题，因为我可以为每个td设置不同的样式，其中一侧的边界留空。
dlts //table style
{
margin: 0;
padding: 0;
border-collapse: collapse;
width: 100%;
}
.dltrs //row style
{
margin: 0;
padding: 0px;
}
.dltds //td style
{
width:33%; text-align:center; height:40px; border:1px solid black;margin: 0px;
padding: 0px; display:table-cell;vertical-align:middle;
}
.ytdc //div style
{
height:50%; text-align: center; width:80%;display:inline-block;position:relative;
background-color:#e5c732;border-radius: 2px;-webkit-border-radius: 2px; -moz-border-radius: 2px; 
-webkit-box-shadow: inset 2px -2px 1px 0px rgba(0,0,0,0.52), inset -2px 2px 1px 0px rgba(255,255,255,0.52); 
-moz-box-shadow: inset 2px -2px 1px 0px rgba(0,0,0,0.52), inset -2px 2px 1px 0px rgba(255,255,255,0.52);
box-shadow: inset 2px -2px 1px 0px rgba(0,0,0,0.52), inset -2px 2px 1px 0px rgba(255,255,255, vertical-align:middle; 
}