Question

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

http://jsfiddle.net/random_user_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"添加到表格中。

这个jsfiddle适用于我的IE 11和Chrome浏览器。现在唯一不同的是，单元格之间的垂直线比边缘更“大胆”。检查自己。

如果这对你来说是一个问题，我会寻找另一个解决方案（虽然它并没有打扰我）。

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

亲切的问候

Div内部的td跨浏览器问题

1 个答案: