V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Macv1994
V2EX  ›  程序员

前端大佬帮忙看看这是啥问题

  •  
  •   Macv1994 ·
    weijiang1994 · 2021-03-08 09:19:56 +08:00 · 3944 次点击
    这是一个创建于 1347 天前的主题,其中的信息可能已经有所发展或是发生改变。

    用的 bootstrap4 UI 库,导航栏在安卓系统上显示正常,如下图 微信图片_20210308091736.jpg

    到了 mac 上,不管是 Safari 还是 edge 或是 chorme 导航栏样式都是错误的如下图,实在是找不出什么原因,没有 Mac 只有一个 iPad 不知道怎么调试,请教各位前端大佬

    微信图片_20210308090636.jpg

    25 条回复    2021-03-09 15:27:32 +08:00
    proger
        1
    proger  
       2021-03-08 09:29:48 +08:00
    老哥好像没什么问题 safari edge chrome 都试了
    https://sm.ms/image/cFpEPGQD1q6difM
    PinkRabbit
        2
    PinkRabbit  
       2021-03-08 09:30:46 +08:00
    没 Mac,网页都正常,看不出来哈哈哈哈
    Macv1994
        3
    Macv1994  
    OP
       2021-03-08 09:46:18 +08:00 via Android
    @proger 😭😭😭
    Macv1994
        4
    Macv1994  
    OP
       2021-03-08 09:46:51 +08:00 via Android
    @proger 为什么在 iPad 上看就我图片那样😭😭
    734694671
        5
    734694671  
       2021-03-08 09:51:54 +08:00
    看起来是像包 blogin 的盒子清除浮动失效了,没有调试工具只能是猜测,要解决只能慢慢调了,或者降版本试试?
    Hslacker
        6
    Hslacker  
       2021-03-08 09:55:48 +08:00
    https://v4.bootcss.com/docs/examples/sticky-footer-navbar/
    不找了,你按这个重搞一个就好了
    Macv1994
        7
    Macv1994  
    OP
       2021-03-08 09:59:40 +08:00 via Android
    @Hslacker 好的 我早晚上回去试试看 谢谢啦

    @734694671 可能是吧,为什么就苹果系统上会失效呢 奇怪😭😭 谢谢啦
    Hslacker
        8
    Hslacker  
       2021-03-08 10:07:10 +08:00
    问题是处在 base.css, body 的 display:flex 上面
    @Macv1994
    Macv1994
        9
    Macv1994  
    OP
       2021-03-08 10:15:58 +08:00 via Android
    @Hslacker 这个我好像是用来固定 footer 用的 footer 一直固定在页面底部 我晚上回去改改看看 谢谢你啦
    litel
        10
    litel  
       2021-03-08 11:20:34 +08:00
    mac 上的 safari 和火狐都一切正常
    rf99wSiT6IxH1Z23
        11
    rf99wSiT6IxH1Z23  
       2021-03-08 11:35:41 +08:00
    图床应用吗?
    Macv1994
        12
    Macv1994  
    OP
       2021-03-08 11:38:41 +08:00
    @litel 谢谢啦 好像是移动端不正常 iPhone 或者 iPad 可以用 iOS 系统试一下吗?

    @cnscorpions 个人博客网站啦
    Alives
        13
    Alives  
       2021-03-08 11:45:29 +08:00
    倒是发现个别的样式问题,在 Chrome iPad 模式下 或者 屏幕宽度小于 992px 的时候,Github 的状态信息栏因为没换行导致超出边框了,可以用 `flex-wrap: wrap;` 来换行。
    https://sm.ms/image/KDTFjNwx4J2Ch61
    Macv1994
        14
    Macv1994  
    OP
       2021-03-08 12:00:01 +08:00 via Android
    @Alives 嗯嗯,这个我也发现了。用控制台调试导航栏显示是正确的,但是到了真实设备上就像我那个图片一样 谢谢啦
    bearboss
        15
    bearboss  
       2021-03-08 15:42:46 +08:00
    可能是因为 ipad 的导航栏会自动缩起 导致窗口尺寸变化导致的?之前适配 ipad 端遇到 不知道是不是同个问题 没细看
    Macv1994
        16
    Macv1994  
    OP
       2021-03-08 15:54:42 +08:00
    @bearboss 我也不清楚 主要是没办法调试 [可怜]
    jackrebel
        17
    jackrebel  
       2021-03-08 16:21:52 +08:00
    貌似是正常的啊。
    Alives
        18
    Alives  
       2021-03-08 17:40:54 +08:00
    找了个 iPad 试了试,.navbar 中加上 `flex: none;` 就好了,发生这种现象的布局:
    1. 父元素是 flex 布局 column 排列,并且父元素高度为 100%
    2. 子元素有多个,一个 flex: 1,其他子元素未设置 flex,暂叫 flex: 1 的元素为 main
    3. 当 main 的子元素超出 flex 布局分配的高度,这时 main 被子元素撑高

    NOTE: 现象仅在 iPad Safari 真机上有,Mac Safari 弹性模式都模拟不出来

    我猜:main 被子元素撑高后,作为 flex 弹性布局,nav 被作为压缩对象,在 iPad Safari 下高度被压缩成 0 (其他环境均有高度),只留下了 nav 子元素的样式高度,`flex: none;` 可以避免被压缩。

    当然只是我猜,真正具体原因还是得靠真大佬... 我也蹲个坑。

    以下是简易的复现代码:
    https://github.com/Aliveing/odd-safari-flex-issue/blob/main/code.html

    现象查看:
    https://aliveing.github.io/odd-safari-flex-issue/
    Macv1994
        19
    Macv1994  
    OP
       2021-03-08 21:08:52 +08:00
    @Alives 老哥你就是大佬啊,真的有效啊,哈哈哈~十分感谢! 这问题困扰我很久了,但是为什么就 iPad 或者 iPhone 上面会有这种情况呢?其他的为什么不是这样? 膜拜大佬~~~
    Alives
        20
    Alives  
       2021-03-08 21:40:07 +08:00 via iPhone
    @Macv1994 能帮上忙就好😄,我也要蹲个大佬来解答下,iPhone 的 Safari 我测试的是没这个问题,仅在 iPad 上有,虽说都是 webkit 内核,我猜可能 iPad 上 Safari 对于 flex 布局计算有点问题,具体的还真不清楚,希望有 css 渲染的大佬来瞅瞅,让我们涨涨知识🥳。
    Macv1994
        21
    Macv1994  
    OP
       2021-03-08 22:08:01 +08:00
    @Alives 哈哈哈哈 很感谢 iPhone8 上显示是错误的 不知道是不是系统的原因
    Alives
        22
    Alives  
       2021-03-09 11:44:33 +08:00
    @Macv1994 今天测试了下,还真像你说的和 iOS 系统有关系,结论是 iOS 14.4 以前的版本都有问题,昨天测试的是 14.3 的 iPad Pro 设备和 14.4 的 iPhone 8 Plus,用虚拟机跑了一遍 14.3 版本的 Safari 全部有问题,14.4 已经修复了,你把 iPhone8 升级到 14.4 应该也会好 😂 ,不过 iOS 14.4 的更新日志上没看到 Safari 相关更新,估计这个问题是被默默修复了。

    iOS14.3 和 iOS 14.4 现象对比: https://sm.ms/image/j2dDuWYkoIHm4Ay

    iOS 更新日志: https://support.apple.com/zh-cn/HT211808
    bmwh123
        23
    bmwh123  
       2021-03-09 11:52:24 +08:00
    https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex
    可以看看下面的 flex 取值 默认是 initial 嘛
    initial
    元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。
    auto
    元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
    none
    元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
    Macv1994
        24
    Macv1994  
    OP
       2021-03-09 15:26:24 +08:00 via Android
    @Alives 嗯嗯 已经按照你的方式修改好了 代码也推上去了 哈哈哈 感谢大佬
    Macv1994
        25
    Macv1994  
    OP
       2021-03-09 15:27:32 +08:00 via Android
    @bmwh123 嗯 感谢啦
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1338 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 23:30 · PVG 07:30 · LAX 15:30 · JFK 18:30
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.