带有下划线</sup>的元素中的<sup>

Question

我有一个带有样式下划线的元素。

在链接中有 ^TM 元素。

是否有可能在所有单词的底部加下划线，因为现在行中断并且sup元素中的下划线更高。

感谢您的帮助

Answer 1

<u>This is some text for Brand Name&trade; to test the error.</u>

有效。我无法重新创建您的错误。

修改 好吧，我的不好 - 我没有使用<sup>元素就回答了。如果您只是使用商标（™）标记，最好只使用HTML表达式™ - 直接在文本中使用。

关于你的问题，你真的有两个选择。

<强> CSS

sup {
    padding-bottom: 4px;
    border-bottom: 1px solid black;
}

*您可能需要根据行高调整padding-bottom值。

<强> HTML

<u>This is a Brand</u><sup>for a company</sup><u> and then some more text</u>

---

或者，Lollero的版本（修改为在线工作）......

<强> CSS

div.underline { display: inline; padding-bottom: 1px; border-bottom: 1px solid #222; }

<强> HTML

<div class="underline">what'<sup>s UP</sup></div>

Answer 2

猜猜这不会引起注意，但是它正在使用FF，IE8及以上版本，遗憾的是不在Chrome中：

  

font-size：60％; vertical-align：top;

Answer 3

如果在外部元素中包装要加下划线的文本，则可以执行以下操作：

http://jsfiddle.net/j2F84/1

HTML：

<div>what'<sup>s UP</sup></div>

CSS：

div { border-bottom: 1px solid #222; float: left; }

Answer 4

这个问题没有简单的解决办法（似乎总有一种情况需要一些小问题来解决）。

对我来说，我更喜欢这样做（与包装一起工作）

HTML：

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

CSS：

{{1}}

https://jsfiddle.net/sLtkx2qe/