td跨浏览器问题中的Div

Question

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

9999/9BXsc/

下面是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>

在我的css文件中：

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; 
}

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

Answer 1

我删除了margins和paddings，尽管它们被设置为0。

我删除了border-collapse并将cellspacing="0"添加到表中。

这个小提琴工作在我的IE 11和Chrome浏览器。现在唯一有一点不同的是，细胞之间的垂直线比边缘更大胆一些。自己检查一下。

如果这对你是一个问题，我会寻找另一个解决方案(这并不困扰我)。

http://jsfiddle.net/9BXsc/11/

亲切的问候