text-underline-position

text-underline-position 属性设置链接或应用了 text-decoration: underline; 的文本的下划线位置。

.element {
  text-underline-position: under;
}

值

这些是在 W3C CSS 文本装饰模块级别 3 候选推荐中指定的值

• auto：默认值。浏览器将在文本基线或下方放置下划线之间进行选择。
• inherit：继承父级的下划线位置。
• under：在下划线下放置下划线，并留出额外空间以防止下划线与降部交叉。
• left：用于垂直书写模式。 这会将线放置在文本的左侧。
• right：用于垂直书写模式。 这会将线放置在文本的右侧。

Microsoft 使用一组不同的值用于 Internet Explorer

• auto：默认值。除日语外，所有语言都将下划线放置在文本下方（有关详细信息，请参阅以下“更多信息”部分中的 MSDN 链接）。
• above：将下划线放置在文本上方。 在视觉上与 text-decoration: overline; 相同
• below：将下划线放置在文本下方。 请注意，这与 under 不同——它不会清除降部。
• auto-pos 与 MS 对 auto 的实现方式相同。

演示

在撰写本文时，text-underline-position 仅部分受 Chrome（33+，启用实验性标志）和 Internet Explorer 6+ 支持。 Chrome 支持 W3C 候选推荐中的 auto、inherit 和 under 值，而 IE 支持其自己的备用值。

此演示显示了支持这些值的浏览器中的 under 和 below 值。

相关

• text-decoration

更多信息

• CSS 文本装饰模块级别 3 CR 中的 text-underline-position。
• MSDN 上的 text-underline-position。

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
33 *	无	无	无	6 †	无	无

* 在 chrome://flags 中启用 -webkit 前缀和实验性标志。 left 和 right 值不受支持。
† 使用 -ms 前缀和 IE 特定的值。

相关