Question

以下是我的代码：

<table border="0" cellspacing="1" cellpadding="0" width="100%">
<tr>
<td width="31%" align="center" valign="middle">
<a href="http://google.com/"></a> 
</td>
<td width="69%" valign="top">
Terms and conditions
<sup>#</sup>
</td>
</tr>
</table>

superscript无效（＃不在顶部。它与条款和条件文本位于同一行。）

我的猜测是vertical-align superscript被table属性覆盖。

以下是从Web开发人员捕获的table属性的默认使用样式表。我也抓住了sup。我没有看到它的值在Web开发人员中被打破了。

tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}

tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}

td, th {
display: table-cell;
vertical-align: inherit;
}

td[Attributes Style] {
width: 31%;
text-align: -webkit-center;
vertical-align: middle;
}

sup {
vertical-align: super;
font-size: smaller;
}

如果我将sup置于table属性之外，则可以正常使用。如何让sup在table内工作？

Answer 1

valign="top"是原因。如果你删除它，上标将起作用。

<td width="69%">
    Terms and conditions<sup>#</sup>
</td>

或者如果你想维护v-align，请封装：

<td width="69%" valign="top">
    <span>Terms and conditions<sup>#</sup></span>
</td>

覆盖上标所需的vertical-align，但由表属性应用

1 个答案: