为什么我的表格单元格与包含文本的高度相同？

Question

没有任何意义。我有

                                    <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>

这意味着电池上没有衬垫;电池没有固定的高度;它上面没有边距，边框或填充元素; line-height等于font-size。

顺便说一下，这只发生在Internet Explorer上。

在Chrome和Firefox上看起来很不错：

Answer 1

并不是说您应该在2016年使用表格进行布局，而是试试这个：

＆＃13;

＆＃13;

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;  
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;