Chrome 中的 HTML 显示了 IE 中未显示的附加边框

Question

您好，我在 Google Chrome 中显示有问题。Google chrome 中显示了额外的行，但在 IE 和 Dreamweaver 中，没有这样的行。这个想法是给一个单元格3个边界。我在代码段中突出显示了此问题代码所在的位置。

提前感谢您的帮助。

HTML 片段

table {
  width: 500px;
  border-collapse: separate;
  table-layout: fixed;
  border-spacing: 4px;
  border: 1px solid grey;
}

.ArrowCell {
  border-bottom: 1px solid red;
  border-top: 1px solid red;
  border-left: 1px solid red;
  border-right: 0;
}

<table>
          <tr>
            <td rowspan="3">&nbsp;</td>
            <td rowspan="2">&nbsp;</td>
            <td rowspan="2">&nbsp;</td>
            <td>&nbsp;</td>
            <td bgcolor="#C4E1FF"><b>resultw</b></td>
          </tr>
          <tr>
            <td rowspan="4" class="ArrowCell">&nbsp;</td>
            <td bgcolor="#F0F0F0"> sdf</td>
          </tr>
          <tr>
            <td bgcolor="#C4E1FF"><b>resut1</b></td>
            <td rowspan="2">&larr;</td>
            <td rowspan="2">&nbsp;</td>
          </tr>
          <tr>
            <td rowspan="7" class="ArrowCell">&nbsp;</td>
            <td bgcolor="#F0F0F0"> 345</td>
          </tr>
          <tr>
            <td rowspan="5">&nbsp;</td>
            <td rowspan="5">&nbsp;</td>
            <td bgcolor="#C4E1FF"><b>result</b></td>
          </tr>
          <tr>
            <td rowspan="3">&nbsp;</td>
            <td bgcolor="#F0F0F0"> sf</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#C4E1FF"><b>rest</b></td>
          </tr>
          <tr>
            <td rowspan="5" class="ArrowCell">&nbsp;</td>  <If I remove the class="", then the whole line will disaapear-->

            <td bgcolor="#F0F0F0">sfd</td>
          </tr>
          <tr>
            <td bgcolor="#C4E1FF"><b>result 2</b></td>
            <td rowspan="2">&larr;</td>
            <td rowspan="3">&nbsp;</td>
          </tr>
          <tr>
            <td rowspan="5" style="border-left-color:#FFF">&nbsp;</td>
            <td bgcolor="#F0F0F0">4356 </td>
          </tr>
          <tr>
            <td rowspan="4">&nbsp;</td>
            <td rowspan="4">&nbsp;</td>
          </tr>
          <tr>
            <td bgcolor="#DFFFDF"><b>resultw</b></td>
          </tr>
          <tr>
            <td rowspan="2">&nbsp;</td>  
            <td bgcolor="#C4E1FF">avv</td>
          </tr>
          <tr>
            <td>&nbsp;</td>
          </tr>
        </table>

尝试过一个解决方案但行不通

将此类添加到带有附加行的单元格中。

.ArrowLeft {
    border-bottom: 2px solid white;
    border-top: 2px solid white;
    border-left: 2px solid white;
    border-right: 2px solid white;
}

Answer 1

更新

虽然 OP 的问题可能看起来很特殊，但这可能适用于任何在 table 上经历过顽固边框并且似乎无法摆脱它的人。

将以下内容添加到表中:

Table {
    border-collapse: separate;
    border-spacing: 0;
    empty-cells: hide;
}

这是结果:http://jsfiddle.net/zer00ne/0Leqah5r

尝试:

.ArrowCell {
    border-top: 1px solid red;
    border-left:  1px solid red;
    border-bottom:  1px solid red;
    border-right: 0 solid transparent;
}

我在 Chrome PC 中没有看到那条额外的行，但是当我用开发者工具检查它时，.ArrowCell 的计算样式被报告为 0.8px solid black;所以我猜将其颜色更改为透明应该可行。

我刚刚想到了您的问题的另一种可能性。仔细检查并查看您的 rowspans 是否可能因相互交叉而冲突。

另一种可能的修复方法是将 border-collapse: separate; 更改为 border-collapse: collapse; 并且可能是 border-spacing: 0