V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
lete
V2EX  ›  前端开发

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

  •  
  •   lete ·
    Lete114 · 2023-05-13 21:35:34 +08:00 · 2213 次点击
    这是一个创建于 594 天前的主题,其中的信息可能已经有所发展或是发生改变。

    口水话

    事情是这样的,在五一假期的时候我写了一个 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 ,或者评论回复我,再此先谢过各位大佬

    image image

    第 1 条附言  ·  2023-05-14 00:30:23 +08:00

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

    具体更改的代码:

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

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

    11 条回复    2023-05-14 14:23:59 +08:00
    lete
        1
    lete  
    OP
       2023-05-13 21:48:47 +08:00
    刚刚找到一个解决办法,就是给 main 标签加一个 css 属性 box-sizing: border-box; 能解决,但还是希望各位大佬能提供一些其它解决办法,在 V2EX 剩下的 1 分钟编辑的时间,我写了上去,不知道还有没有其它办法能解决。很想知道这种情况是怎么形成的,目前也不知道 ` box-sizing: border-box; ` 会不会有其它弊端
    shuxhan
        2
    shuxhan  
       2023-05-13 21:50:49 +08:00   ❤️ 1
    .main-wrap main.main-width{box-sizing: border-box;}

    盒子模型问题

    一般我在新项目最开始会加一个 *{padding:0;margin:0;box-sizing: border-box;}
    清除掉默认样式
    ksc010
        3
    ksc010  
       2023-05-13 21:52:13 +08:00
    额 你是不是在修改代码?
    打开是亮色主题的,样式跟你截图的也不一样,想看下什么问题,修改了下样式,刷新下又变了。。。
    randomstream
        4
    randomstream  
       2023-05-13 21:53:45 +08:00
    .main-width {overflow: auto}
    lete
        5
    lete  
    OP
       2023-05-13 22:03:43 +08:00
    @ksc010 没改代码,我部署的是在仓库的 docs 分支
    lete
        6
    lete  
    OP
       2023-05-13 22:07:00 +08:00
    @shuxhan 谢谢大佬
    lete
        7
    lete  
    OP
       2023-05-13 22:07:29 +08:00
    @randomstream 这个不行
    ciaoca
        8
    ciaoca  
       2023-05-13 22:33:33 +08:00
    bug 文章的内容含有个 figure 标签,class 属性包含 highlight
    盲猜是用了个代码高亮插件,这个 figure.highlight 自带了 margin 边距,要取消要么修改插件源码,或者自己写一条覆盖它
    randomstream
        9
    randomstream  
       2023-05-13 22:42:10 +08:00
    不是实现这种效果吗? 添加 overflow: auto 或 hidden 后就这样 :lol
    ![fix]( )

    @lete
    a632079
        10
    a632079  
       2023-05-13 23:34:39 +08:00   ❤️ 1
    盒子模型问题,强烈建议任何项目开始前导入个 normalize.css 来完成所有浏览器 CSS 的标准样式重置。
    content-box 的坑很大,强烈建议使用 border-box 。
    guozhigq
        11
    guozhigq  
       2023-05-14 14:23:58 +08:00
    我昨天部署的时候也发现了,自己在本地改的 CSS
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2402 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 01:06 · PVG 09:06 · LAX 17:06 · JFK 20:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.