admin 服务器教程 2023-06-25 10:31:20

CSS 真是让人抓狂，真心求助 CSS 大佬

口水话

事情是这样的，在五一假期的时候我写了一个 Hexo 博客主题《五一假期，我花了 5 天写了个 Hexo 博客主题》，现在仍然在持续更新与调整(beta 阶段)，直到今天我准备把我的博客迁移到新主题时，我发现一个非常奇怪的问题。挠了一下午的头，仍然无法解决一个 css 问题，一直折腾到了现在的晚上 9 点钟，所以在此像询问一下各位 css 大佬能帮我看看这个问题吗？

调 css 是真的痛苦，修好一个地方的样式，另一个地方的样式就崩了，导致我陷入了循环(我 css 太菜了)

问题

如果一篇文章内有代码块，且这个代码块中的代码单行长度(指的是水平长度)比较长(超出了页面的宽度显示范围)，这种情况一般来说会有两种解决办法超出时x 轴显示滚动条或自动换行显示，我采用的是显示滚动条。到目前为止没有任何问题，一切正常，在电脑设备上文章主体是正常的，但如果是小屏幕的手机设备就会出现问题

我找到的一个线索是一个 pre 标签，你可以使用这个代码在浏览器控制台快速定位到这个标签

document.querySelector("body > div.container > div > main > article > div.article-content > figure > table > tbody > tr > td.code > pre")

我刚刚找到一个解决办法，就是给 main 标签加一个 css 属性 box-sizing: border-box; 能解决，但还是希望各位大佬能提供一些其它解决办法

如果有大佬解决了这个问题，欢迎到 Lete114/Hexo-Theme-MengD 提交 PR ，或者评论回复我，再此先谢过各位大佬

有代码块的 bug 文章: https://mengd.js.org/2013/12/25/no-title/
无代码块的正常文章: https://mengd.js.org/2013/12/25/excerpts/

感谢各位大佬的热心帮助，已经解决了

具体更改的代码:

box-sizing: border-box: commit/70a7ebd4a6d8a1a2aa7842c5d48e70eb2aa04e74
调整: commit/ef5adb91e3ed4b19c0e484e15a018608c9312450

接下来网站将会更新到最新版，所以之前上面提到的链接中样式会得到修复

https://mengd.js.org/2013/12/25/no-title/
https://mengd.js.org/2013/12/25/excerpts/

所以如果有大佬对该问题感兴趣的可以访问这个历史部署版本的链接

https://mengd-8a0ncuqri-lete114.vercel.app/2013/12/25/no-title/
https://mengd-8a0ncuqri-lete114.vercel.app/2013/12/25/excerpts/

----------------------- 以下是精选回复-----------------------

答:刚刚找到一个解决办法，就是给 main 标签加一个 css 属性 box-sizing: border-box; 能解决，但还是希望各位大佬能提供一些其它解决办法，在 V2EX 剩下的 1 分钟编辑的时间，我写了上去，不知道还有没有其它办法能解决。很想知道这种情况是怎么形成的，目前也不知道 ` box-sizing: border-box; ` 会不会有其它弊端
答:.main-wrap main.main-width{box-sizing: border-box;}

盒子模型问题

一般我在新项目最开始会加一个 *{padding:0;margin:0;box-sizing: border-box;}
清除掉默认样式
答:额你是不是在修改代码?
打开是亮色主题的，样式跟你截图的也不一样，想看下什么问题，修改了下样式，刷新下又变了。。。
答:.main-width {overflow: auto}
答:bug 文章的内容含有个 figure 标签，class 属性包含 highlight
盲猜是用了个代码高亮插件，这个 figure.highlight 自带了 margin 边距，要取消要么修改插件源码，或者自己写一条覆盖它
答:盒子模型问题，强烈建议任何项目开始前导入个 normalize.css 来完成所有浏览器 CSS 的标准样式重置。
content-box 的坑很大，强烈建议使用 border-box 。
答:我昨天部署的时候也发现了，自己在本地改的 CSS