sub仅对齐一个元素下面的文本

Question

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

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

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

这是小提琴: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规范:

将框的基线降低到父框的下标的正确位置.
https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align

解释(为什么发生这种情况)
的<tbody>使用vertical-align:middle;.这些规则以整个内容为中心<tbody>.该<td>元素继承此规则.你可以看到整个内容(带有下标)位于中间.下标的整个内容比没有下标略高,中间不在字母的中间,因为下标扩展了整个文本的高度.如果要将字母设置为一行,则必须将vertical-align其设置为基线.基线是放置字母的位置或线.如果对行的所有内容执行此操作,则文本(不在下标中)应位于一行(请参阅示例).