html - sub 仅对齐一个元素下方的文本

Question

当我尝试将字符 c 创建为子对齐时，表格行中随后的 bar 文本也会子对齐(非常不直观)。

<table> 
  <tr>
    <td>test</td>
    <td>foo<sel style="vertical-align: sub">c</sel></td>
    <td>bar</td>
  </tr>
</table>

有人可以指出我做错了什么或如何解决这个问题。

这是 fiddle :https://jsfiddle.net/aaL06scu/

Answer 1

使用这个:

td {
  vertical-align:baseline;
}
sel {
  vertical-align:sub;
}

<table>	
  <tr>
    <td>test</td>
    <td>foo<sel>c</sel></td>
    <td>bar</td>
  </tr>
</table>

来自官方 CSS 规范:

Lower the baseline of the box to the proper position for subscripts of the parent's box.
https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

解释(为什么会这样):
<tbody>正在使用 vertical-align:middle; .这些规则将 <tbody> 的全部内容垂直居中. <td>元素继承此规则。你可以看到整个内容(带下标)在中间。整个内容带下标比不带下标高一点，中间不在字母中间，因为下标延伸了整个文本的高度。如果你想将字母设置为一行，你必须 vertical-align到基线。基线是放置字母的位置或线。如果您对一行的所有内容执行此操作，文本(不在下标中)应该在一行上(参见示例)。