html - 为什么我的表格单元格与其所包含的文本不一样高？

没有意义。我有

                                    <td valign="top" style="border-right: 1px solid #E84135; padding: 0 5px;" class="width-33pct-on-mobile">
                                        <a href="..." style='color:#666666;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:8pt;margin:0;line-height:8pt;'>EVENTS</a>
                                    </td>
                                    <td valign="top" style="border-right: 1px solid #E84135; padding: 0 5px;" class="width-33pct-on-mobile">
                                        <a href="..." style='color:#666666;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:8pt;margin:0;line-height:8pt;'>SOLUTIONS</a>
                                    </td>
                                    <td valign="top" style="padding: 0 5px;" class="width-33pct-on-mobile">
                                        <a href="..." style='color:#666666;text-decoration:none;font-family:Helvetica,Arial,sans-serif;font-size:8pt;margin:0;line-height:8pt;'>CONTACT</a>
                                    </td>

这意味着该单元格上没有填充；牢房上没有固定的高度；所包含的元素上没有边框，边框或填充；行高等于字体大小。

顺便说一句，这仅在Internet Explorer上发生。







在Chrome和Firefox上看起来不错：

最佳答案

并不是说您应该在2016年使用表格进行布局，但是请尝试以下操作：

td {
  border-right: 1px solid #E84135;
  padding: 0 5px;
  line-height: 8pt;
}

a {
  padding: 0 5px;
  color: #666666;
  text-decoration: none;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 8pt;
  margin: 0;
}

<table>
  <tr>
    <td valign="top" class="width-33pct-on-mobile">
      <a href="...">EVENTS</a>
    </td>
    <td valign="top" class="width-33pct-on-mobile">
      <a href="...">SOLUTIONS</a>
    </td>
    <td valign="top" class="width-33pct-on-mobile">
      <a href="...">CONTACT</a>
    </td>
  </tr>
</table>

关于html - 为什么我的表格单元格与其所包含的文本不一样高？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35090353/