HTML中的Ruby标签之间的间隔问题？

作者站长头像
站长
· 阅读数 16

2个使用下划线标签包裹的HTML的ruby标签，为什么中间会有间隔？

<html>

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

</html>

如题：HTML中的Ruby标签之间的间隔问题？我想让「源義経」这三个字的下划线能连续起来，现在不知道什么原因，中间断开了

回复
1个回答
avatar
test
2024-06-23

answer image左侧是 Chrome，右侧是 Firefox

和浏览器实现有关系。考虑直接用 border-bottom 替代吧

answer image标签间换行导致的空白占位符，这样修改就好了

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

要不然就是在父级设置 font-size:0 这样的CSS样式。

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容