Question

我有HTML代码：

<div id="blah">
   We have winner of 1<sup>st</sup> Tournament
</div>

用css

#blah{
text-decoration:underline;
}

但是这会将st的下划线移到顶部并且看起来很奇怪。有什么方法可以使用css修复它

Answer 1

简单试试这个

#blah sup{
display:inline-block;
border-bottom:1px solid #000;
padding-bottom:2px;//as per your requirement
}

Answer 2

使用border-bottom代替text-decoration（如果您只有一行文字）

#blah{
    border-bottom:solid 1px black;
    display:inline-block;
    line-height:15px
}

<强> DEMO

Answer 3

如果你想使用下划线而不是底部边框（它们是不同的东西），那么唯一可以接受印刷术的解决方案似乎是使用上标字形而不是sup标记或与之对应的CSS。您可以使用font-feature-settings执行此操作。

坏消息是，在人们通常安装在人们计算机上的字体中，只有少数字体，如所谓的C字体（Calibri，Cambria，Candara，Consolas，Constantia，Corbel）和Palatino Linotype，都包含这样的字形。浏览器支持也存在一些限制（例如，不支持IE 9及更早版本）。例如：

<style>
.sup { 
  -webkit-font-feature-settings: "sups";
  -moz-webkit-font-feature-settings: "sups";
  font-feature-settings: "sups";
}
</style>
We have winner of 1<span class=sup>st</span> Tournament

另一方面，使用这种方法是安全的，因为当技术不起作用时，渲染会回落到没有样式的“1st”（下划线表现正常）。

Answer 4

接受的答案对我不起作用，因为边框有时会被下划线偏移，具体取决于浏览器缩放和/或字体大小。

但是，我确实在网上找到了没有这种效果的解决方案。这完全归功于“无情”@ https://gist.github.com/unruthless/413930留下的评论，他们将Twitter用户称为“chikuyonok”。用户还提供了一个工作示例：http://jsfiddle.net/yyHNp/5/

以下内容直接来自上面链接的示例，对我来说非常有效。

a {
    text-decoration: none;
    background: -moz-linear-gradient(left, red, red 100%);
    background: -ms-linear-gradient(left, red, red 100%);
    background: -o-linear-gradient(left, red, red 100%);
    background: -webkit-gradient(linear, 0 0, 100% 0, from(red), to(red));
    background: -webkit-linear-gradient(left, red, red 100%);
    background: linear-gradient(left, red, red 100%);
    background-position: 0 100%;
    background-size: 10px 1px;
    background-repeat: repeat-x;
}

Answer 5

这可能会有所帮助，特别是如果您尝试覆盖框架设置的样式或无用的默认浏览器样式：

#blah sup {
  position: static;
  display: inline;
  vertical-align: super;
  font-size: 75%;
}

显然也是

#blah {
  text-decoration: underline;
}

与OP一样。

Answer 6

刚刚将其发布在其他地方;

这个问题没有简单的解决办法（似乎总有一种情况需要一些小小的修复）。我只需要2px或1px下划线; 'u1'和'u2'。虽然'你'我只是{text-decoration：underline;}（我喜欢保持简短和甜蜜）

（与包装一起使用）。

HTML：

<span class="u2">
  Registered<sup>&reg;</sup>
</span>

CSS：

.u2{
  border-bottom:2px solid #666666;display:inline;
}
sup{
  font-size: 40%;
  display: inline;
  vertical-align: top;
}

https://jsfiddle.net/sLtkx2qe/

上标下划线随文字移动

6 个答案: