Question

我有以下html表：

家预订请求学校简介预订帮助

CSS

.navBarItemContainer {
    background-color:#e5e5e5;width:25%;display:inline-block;
    margin:0px;
    border-collapse: collapse;
    color:black;
    height:90px;
}
.navBarItemContainer_selected {
    background-color:#efefef;width:25%;display:inline-block;
    margin:0px;
    border-bottom:4px solid #fece00;
    color:black;
    border-collapse: collapse;
    height:90px;
}
noBordertable, .noBordertable td {
    border:0;background:none;margin:0;padding:0;
}

JSFiddle

在Google Chrome浏览器上，它运行正常，但在新的 Edge 浏览器上，它会在表格单元格之间显示空格（<td> s），因此下一个td会显示线。我应该怎样做才能在边缘浏览器中修复它？

Answer 1

您应该只删除</td>和新<td>之间的空格/分隔线，以解决您的问题。

因为您正在使用display:inline-block并且它将计算end元素和start元素之间的每个空格。

所以应该是这样的：

</td><td style="padding:0;margin:0;border-collapse: collapse;" class="navBarItemContainer">

不

</td>
<td style="padding:0;margin:0;border-collapse: collapse;" class="navBarItemContainer">

<强> Working Fiddle

Check for more information

Answer 2

一种简单的方法是真正使它们内联：

所以不要这样：

<td>

</td>
<td>

</td>

像这样：

<td>

</td><td>

</td>

或者你可能会这样：

<td>

</td><!--
--><td>

</td>

或者您可以将最后一个字符放在新行：

<td>

</td
><td>

</td>

Cloudera here有一个关于打击内联块元素之间的空间的完整故事，您可能需要查看。

如何在边缘浏览器中删除表格单元格之间的白色间距

2 个答案: