博客的离谱排版问题

创建于 11/15/2024

一石激起千层浪

今天,手机 Firefox 打开博客,发现排版有问题:太宽的代码块本应显示滚动条而不换行,但却换行了。

打开电脑 Edge,调成手机模式一看,确有问题。于是准备修复。打开 VitePress 调试,再一看,竟然可以显示滚动条!再从手机看调试,也正常了!

突然就好了,咋回事,咋办?不知道。只好先在手机上摸索一番,结果发现另一个问题:代码块若太宽而显示滚动条,则右侧 padding 消失。先解决这个问题吧。

打开电脑 Edge,一看,居然没问题!再打开手机 Edge,也没问题。这啥情况,Edge 和 Firefox 行为不同?于是打开电脑 Firefox,果然复现问题。能复现就简单了。打开 VitePress 官网,参照其样式做了些修改,成功修复。

如此,看着正常了,想着本地构建看看。一构建,哦嚯,第一个问题成功复现。咋回事?原来是有篇文章的样式没加 scoped,泄露到全局了。调试时没打开那篇文章,样式不会加载,当然就没问题。成功修复。

看着正常了……不对!还有问题!文章《HTML 转文本的坑》中引用标准的一段,换行不正确。一调试,发现是空格问题,有的空格变成了  

这咋回事?这篇文章是用 Obsidian 写的,这段是直接粘贴的。标准里头都是正常空格,粘贴过来就成了  。是不是 Obsidian 有问题?搜索发现,是浏览器的锅。凡是标签两头的空格,都会变成  。没啥好办法,只好手动替换。

替换完再看,发现还有问题。标准里头是斜体的,粘贴过来把斜体丢了。这回似乎是 Obsidian 的锅了。我也不知道咋回事,手动加上完事。

一个样式泄露问题,牵扯出四个问题,居然还是相互独立的,真是哭笑不得。