Line number and code block lines misalign in some devices

[dingqianwen]

Description

目前版本：2.0.0-beta.45

当代码块行数很多时，行号与代码对应不齐问题，如下图所示

通过重写div[class*=language-].line-numbers-mode .line-numbers .line-number样式height: 1.377em;自行修复后如下所示

Reproduction

https://apidocs.cn/blog/front/css/%E5%A5%BD%E7%9C%8B%E7%9A%84%E5%8A%A0%E8%BD%BD%E5%8A%A8%E7%94%BBCSS%E6%A0%B7%E5%BC%8F.html

Used Package Manager

npm

System Info

***@localhost my-blog % vuepress info

  System:
    OS: macOS 12.3.1
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 540.20 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.15.0 - /usr/local/bin/node
    Yarn: Not Found
    npm: 8.5.5 - /usr/local/bin/npm
  Utilities:
    Git: 2.32.1 - /usr/bin/git
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Not Found
    Firefox: 100.0.1
    Safari: 15.4
  npmPackages:
    @vuepress/bundler-vite:  2.0.0-beta.45 
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli:  2.0.0-beta.45 
    @vuepress/client:  2.0.0-beta.45 (2.0.0-beta.5)
    @vuepress/core:  2.0.0-beta.45 (2.0.0-beta.5)
    @vuepress/markdown:  2.0.0-beta.45 (2.0.0-beta.5)
    @vuepress/plugin-active-header-links:  2.0.0-beta.45 
    @vuepress/plugin-back-to-top:  2.0.0-beta.45 
    @vuepress/plugin-container:  2.0.0-beta.45 
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon:  2.0.0-beta.45 
    @vuepress/plugin-git:  2.0.0-beta.45 
    @vuepress/plugin-google-analytics: ^2.0.0-beta.45 => 2.0.0-beta.45 
    @vuepress/plugin-medium-zoom:  2.0.0-beta.45 
    @vuepress/plugin-nprogress:  2.0.0-beta.45 
    @vuepress/plugin-palette:  2.0.0-beta.45 
    @vuepress/plugin-prismjs:  2.0.0-beta.45 
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: 2.0.0-beta.45 => 2.0.0-beta.45 
    @vuepress/plugin-search: 2.0.0-beta.45 => 2.0.0-beta.45 
    @vuepress/plugin-shiki: ^2.0.0-beta.5 => 2.0.0-beta.5 
    @vuepress/plugin-theme-data:  2.0.0-beta.45 
    @vuepress/plugin-toc: 2.0.0-beta.45 => 2.0.0-beta.45 
    @vuepress/shared:  2.0.0-beta.45 (2.0.0-beta.4)
    @vuepress/theme-default:  2.0.0-beta.45 
    @vuepress/utils:  2.0.0-beta.45 (2.0.0-beta.5)
    vue:  3.2.33 
    vue-loader: Not Found
    vue-router:  4.0.15 
    vuepress: 2.0.0-beta.45 => 2.0.0-beta.45 
    vuepress-vite:  undefined (2.0.0-beta.45)
    vuepress-webpack: Not Found

[dingqianwen]

同时，咱们官网也有一样的问题，虽然代码块只有20行，如下图所示

请问，我是否可以提交一个PR🥺

[Mister-Hope]

欢迎，但请你在PR里写清楚问题发生的原因以及行高的计算过程。

我印象中我没有在最近的版本更改过相关代码，而且我也不记得哪里有 1.377em

[dingqianwen]

欢迎，但请你在PR里写清楚问题发生的原因以及行高的计算过程。

我印象中我没有在最近的版本更改过相关代码，而且我也不记得哪里有 1.377em

好的，谢谢，是出问题的是目前1.4 经过多次计算与测试改为 1.377是正常的，我正准备提交PR

[dingqianwen]

修复后的官网效果下图所示，同时我自己博客的代码块也经过大量测试，等待合并PR中😊

[Mister-Hope]

我的问题是 0.0333 em 是在哪差出来的。

[Mister-Hope]

我跟你对话这么费劲呢？如果这是你凑出来的，你只能说明当前你使用的 Chrome 浏览器，在使用 1.377作为行高是正常的。

它不能说明：

• Safari 1.377 也正常
• Firefox 也正常
• 其他诸如手Q浏览器（X5内核） 等其他内核浏览器也正常。

在找到一个完整的解释，解答为什么在 Chrome 全部（或特定）版本正常使用和代码行高相同的1.4em会出现“对不齐”的问题，以及一个完整的计算，差出的是多少之前，我拒绝任何此类PR。

[dingqianwen]

我跟你对话这么费劲呢？如果这是你凑出来的，你只能说明当前你使用的 Chrome 浏览器，在使用 1.377作为行高是正常的。

它不能说明：

• Safari 1.377 也正常
• Firefox 也正常
• 其他诸如手Q浏览器（X5内核） 等其他内核浏览器也正常。

在找到一个完整的解释，解答为什么在 Chrome 全部（或特定）版本正常使用和代码行高相同的1.4em会出现“对不齐”的问题，以及一个完整的计算，差出的是多少之前，我拒绝任何此类PR。

👍，这里代码2022.5.14日有人改过这里的样式，我说怎么突然这样了，换成以前的版本没问题

[Mister-Hope]

我刚才debug一下，我毫无头绪，我自己的主题是正常的，但是我自己的主题和官方主题的样式几乎一样（至少在字号布局方面我没看到有什么不一样的地方）。

代码那边行高就是 1.4，原则上行号这边1.4应该和我主题一样是对齐的。有兴趣你可以接着研究研究。凑数是不行的，我刚才看了一下我的ipad，我肉眼看官网文档没看到很明显的越来越对不齐的痕迹。

这个问题我觉得不是很着急，有空看看@meteorlxy有没有什么思路，至少我现在是没有任何头绪差的这一丁点是哪出来的。

你可以先自行按照你凑出来的自己覆盖一下样式。

[dingqianwen]

我刚才debug一下，我毫无头绪，我自己的主题是正常的，但是我自己的主题和官方主题的样式几乎一样（至少在字号布局方面我没看到有什么不一样的地方）。

代码那边行高就是 1.4，原则上行号这边1.4应该和我主题一样是对齐的。有兴趣你可以接着研究研究。凑数是不行的，我刚才看了一下我的ipad，我肉眼看官网文档没看到很明显的越来越对不齐的痕迹。

这个问题我觉得不是很着急，有空看看@meteorlxy有没有什么思路，至少我现在是没有任何头绪差的这一丁点是哪出来的。

你可以先自行按照你凑出来的自己覆盖一下样式。

👍，好的，辛苦了，早点睡吧

[Mister-Hope]

你的复现现在已经失效了，meteorlxy不能复现，你有什么改动么？我有留意到你加了一行height:auto，但禁用它并没有什么变化。

[Tarocch1]

我这里在 chrome 上是正常的，但是 safari 有问题，包括 mac、iphone 和 ipad。

试了一下，删掉 .line-number 的 height 属性可以解决问题：

正式修复之前，应该可以先在自己页面上设置 auto 临时处理一下：

.line-number {
  height: auto !important;
}

[nibazshab]

我这里 chrome，safari, edge 都有问题，且无论 height 设为多少都无法对齐，最多只能让某一个代码块的行号对齐，另一个代码块会发生更严重的错位