core
core copied to clipboard
vuepress
Line number and code block lines misalign in some devices
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
欢迎，但请你在PR里写清楚问题发生的原因以及行高的计算过程。
我印象中我没有在最近的版本更改过相关代码，而且我也不记得哪里有 1.377em
好的，谢谢，是出问题的是目前1.4 经过多次计算与测试改为 1.377是正常的，我正准备提交PR
我跟你对话这么费劲呢？如果这是你凑出来的，你只能说明当前你使用的 Chrome 浏览器，在使用 1.377作为行高是正常的。
它不能说明：
- Safari 1.377 也正常
- Firefox 也正常
- 其他诸如手Q浏览器（X5内核） 等其他内核浏览器也正常。
在找到一个完整的解释，解答为什么在 Chrome 全部（或特定）版本正常使用和代码行高相同的1.4em会出现“对不齐”的问题，以及一个完整的计算，差出的是多少之前，我拒绝任何此类PR。
我跟你对话这么费劲呢？如果这是你凑出来的，你只能说明当前你使用的 Chrome 浏览器，在使用 1.377作为行高是正常的。
它不能说明：
- Safari 1.377 也正常
- Firefox 也正常
- 其他诸如手Q浏览器（X5内核） 等其他内核浏览器也正常。
在找到一个完整的解释，解答为什么在 Chrome 全部（或特定）版本正常使用和代码行高相同的1.4em会出现“对不齐”的问题，以及一个完整的计算，差出的是多少之前，我拒绝任何此类PR。
👍，这里代码2022.5.14日有人改过这里的样式，我说怎么突然这样了，换成以前的版本没问题
我刚才debug一下，我毫无头绪，我自己的主题是正常的，但是我自己的主题和官方主题的样式几乎一样（至少在字号布局方面我没看到有什么不一样的地方）。
代码那边行高就是 1.4，原则上行号这边1.4应该和我主题一样是对齐的。有兴趣你可以接着研究研究。凑数是不行的，我刚才看了一下我的ipad，我肉眼看官网文档没看到很明显的越来越对不齐的痕迹。
这个问题我觉得不是很着急，有空看看@meteorlxy有没有什么思路，至少我现在是没有任何头绪差的这一丁点是哪出来的。
你可以先自行按照你凑出来的自己覆盖一下样式。
我刚才debug一下，我毫无头绪，我自己的主题是正常的，但是我自己的主题和官方主题的样式几乎一样（至少在字号布局方面我没看到有什么不一样的地方）。
代码那边行高就是 1.4，原则上行号这边1.4应该和我主题一样是对齐的。有兴趣你可以接着研究研究。凑数是不行的，我刚才看了一下我的ipad，我肉眼看官网文档没看到很明显的越来越对不齐的痕迹。
这个问题我觉得不是很着急，有空看看@meteorlxy有没有什么思路，至少我现在是没有任何头绪差的这一丁点是哪出来的。
你可以先自行按照你凑出来的自己覆盖一下样式。
👍，好的，辛苦了，早点睡吧
我这里在 chrome 上是正常的，但是 safari 有问题，包括 mac、iphone 和 ipad。
试了一下，删掉 .line-number 的 height 属性可以解决问题：
正式修复之前，应该可以先在自己页面上设置 auto 临时处理一下：
.line-number {
height: auto !important;
}
我这里 chrome，safari, edge 都有问题，且无论 height 设为多少都无法对齐，最多只能让某一个代码块的行号对齐，另一个代码块会发生更严重的错位
