时间戳

首页 > 解决方案 > 从 Google Chrome 到 Microsoft Edge，HTML 表格上方和下方的空间差异很大

html - 从 Google Chrome 到 Microsoft Edge，HTML 表格上方和下方的空间差异很大

问题描述

在网站https://neu.seidelpartner.ch/上，我将以下 HTML 表插入到 WordPress 文本框中：

#kunden {
  border-spacing: 30px;
}

#cell1,
#cell2,
#cell3,
#cell4,
#cell5,
#cell6,
#cell7,
#cell8 {
  font-family: "Proxima Nova Bold";
  font-size: 14px;
  color: #857f7b;
  letter-spacing: 2px;
  text-align: left;
  vertical-align: middle;
  border: 1px solid black;
  border-radius: 15px;
  box-shadow: 1px 1px rgba(0, 0, 0, 0.5), 2px 2px rgba(0, 0, 0, 0.4), 3px 3px rgba(0, 0, 0, 0.3), 4px 4px rgba(0, 0, 0, 0.2), 5px 5px rgba(0, 0, 0, 0.1), 6px 6px rgba(0, 0, 0, 0.08), 7px 7px rgba(0, 0, 0, 0.06), 8px 8px rgba(0, 0, 0, 0.04);
  padding-top: 60px;
  padding-bottom: 60px;
  padding-left: 10px;
  padding-right: 10px;
  width: 200px;
  height: 160px;
}
<table id="kunden">
  <tr id="row1">
    <td id="cell1">BAHNUNTERNEHMEN</td>
    <td id="cell2">BEHÖRDEN</td>
    <td id="cell3">GENOSSENSCHAFTEN</td>
    <td id="cell4">INVESTOREN</td>
  </tr>
  <tr id=row2>
    <td id="cell5">PROJEKTENTWICKLER</td>
    <td id="cell6">IMMOBILIEN-ANLAGESTIFTUNGEN</td>
    <td id="cell7">KMU</td>
    <td id="cell8">PLANER</td>
  </tr>
</table>

现在我观察到，桌子上方和下方的空间变化很大，从 Google Chrome（第一张图片，大空间）到 Microsoft Edge（第二张图片，小空间）。我的意图是它在 Edge 中的外观。

在此处输入图像描述 在此处输入图像描述

我做了一些研究，似乎很多人在不同的元素上都出现了这种间距差异，但我自己无法解决这个问题。

这也是我第一次接触 HTML 和 CSS。我并没有真正从一开始就学习这些，而是​​研究了我需要的东西。

非常感谢您的任何反馈。

问候

标签： htmlcsswordpressspacing

解决方案

感谢@Pete 将代码更改为片段，我不知道这是可能的（非常酷的功能）。您的评论让我更深入地研究了这个问题，我可以自己解决。

在表格的上方和下方都有一个伪元素::before和。::after

可以通过以下方式将其删除：

div.gdlr-core-pbf-column-content.clearfix.gdlr-core-js::before {
    content: none;
}

div.gdlr-core-pbf-column-content.clearfix.gdlr-core-js::after {
    content: none;
}

问候

推荐阅读