HTML中Ruby标签与下划线标签如何避免间距问题？

html中ruby标签隔开的疑问

在html中，使用下划线标签包裹住标签时，不同浏览器会造成标签之间的间隔问题。

问题原因

这是由于不同浏览器对标签的实现方式不同所致，如chrome和firefox就存在差异。

解决方法

为了避免这种间隔，可以使用以下方法：

• 使用border-bottom替代标签：将下划线改用border-bottom属性设置。
• 删除标签间的换行符：将标签之间的换行符删除，这样可以消除空白占位符。

例如，可以将代码修改为：

<div>
  <u_>
    <ruby>
      <rb>源</rb>
      <rp>（</rp>
      <rt>みなもの</rt>
      <rp>）</rp>
    </ruby><ruby>
      <rb>義経</rb>
      <rp>（</rp>
      <rt>よしつね</rt>
      <rp>）</rp>
    </ruby>
  </u_>
</div>

或者设置父级css样式：font-size:0

以上就是html中ruby标签与下划线标签如何避免间距问题？的详细内容，更多请关注代码网其它相关文章！