【问题标题】:Is it possible to expressly set a line's height of text underlined using `text-decoration: underline;` in CSS?是否可以在 CSS 中使用 `text-decoration: underline;` 明确设置下划线文本的行高?
【发布时间】:2010-12-19 17:10:45
【问题描述】:

是否可以在 CSS 中使用text-decoration: underline; 明确设置下划线文本的行高? IE 和 FireFox 将带有 font-weight: bold;text-decoration: underline; 的文本呈现为粗体或粗线,因为缺少更好的词。 Chrome、Safari 和 Opera 将其呈现为 1px。

我们的目标是在浏览器中一致地呈现它(不,真的吗?继续!)。有什么建议吗?

【问题讨论】:

  • 请您重新表述您的问题,我似乎不太清楚。
  • 当您将文本设置为粗体(使用 CSS)并且文本带有下划线(使用 CSS)时,文本下方的行在 IE 和 FireFox 中也会呈现为粗体(粗线)。

标签: css browser text-decorations


【解决方案1】:

最简单的方法是用<b> 元素包装它并给它一个bottom-border:1px solid;

这将确保 udnerline 在所有浏览器中都是 1 px

【讨论】:

  • 当文本超过行时,这将不起作用。但是,我想你很少想要带有下划线的文本。
  • +1,适用于 FireFox。我仍然使用你的方法在 IE 中得到粗体线。还有其他想法吗?
  • @Mr.史密斯:如果还是不行,把整个东西(包括<b>元素)包裹在另一个<span>标签中,然后应用bottom-border: 1px solid;。虽然不是很漂亮...
  • 在IE里还是不行,但不得不说,它是IE 9 beta。也许他们会修复它。标记为答案,感谢您的帮助 Herman。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2023-03-10
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2020-08-21
  • 2014-02-25
相关资源
最近更新 更多