为什么我的表格单元格的高度与其包含的文本不同？答案

【问题标题】：Why isn't my table cell the same height as it's contained text?为什么我的表格单元格的高度与其包含的文本不同？
【发布时间】：2016-05-07 12:46:48
【问题描述】：

没有意义。我有

                                    <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 上看起来不错：

【问题讨论】：

欢迎来到互联网的怪异之处。在您的 TABLE 命令上是否有“cellspacing='0' cellpadding='0'”？此外，您的 TD 命令有“padding:0px”，但没有“margin:0px”。你可能想检查一下。 stackoverflow.com/questions/4795803/… 和 stackoverflow.com/questions/339923/… 可能重复

标签： html css

【解决方案1】：

不是说您应该在 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>

【讨论】：