8

我有类似的 HTML 代码：

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

用CSS

#blah{
text-decoration:underline;
}

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

4

7 回答 7

13

很简单试试这个

#blah sup{
display:inline-block;
border-bottom:1px solid #000;
padding-bottom:2px;//as per your requirement
}
于 2013-05-30T11:46:39.667 回答
6

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

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

演示

于 2013-05-30T11:49:09.740 回答
1

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

但是，我在网上确实找到了一个没有这个效果的解决方案。这一切都归功于“unruthless”@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;
}
于 2013-12-19T00:33:42.457 回答
1

如果您想使用下划线而不是底部边框（它们是不同的东西），那么唯一在印刷上可接受的解决方案似乎是使用上标字形而不是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”（下划线行为正常）。

于 2013-05-30T12:11:47.967 回答
0

如果您根本不想要下划线，但您希望上标或商标成为锚标记的一部分。这就是我所做的。我只想要悬停时的下划线。

代码：

a{text-decoration:none;}  a:hover .supS{text-decoration:underline;display:inline-block;}

名称 title ®续
AT&T Uverse ®

演示链接：http: //jsfiddle.net/sunnysak/2ttx5/

希望它可以帮助某人

-S

于 2014-03-18T21:13:43.067 回答
0

这可能会有所帮助，尤其是当您尝试覆盖框架设置的样式或无用的默认浏览器样式时：

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

显然也与

#blah {
  text-decoration: underline;
}

就像在 OP 中一样。

于 2014-11-29T02:07:01.970 回答
0

刚刚把这个贴在别处；

这个问题没有简单的解决方案（似乎总是存在需要一些摆弄才能解决的情况）。我只需要 2px 或 1px 下划线；“u1”和“u2”。而 'u' 我只保留 {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/

于 2017-05-23T15:10:11.867 回答