[前端求助] 同样的代码页面表现不一致

[JustSong]

问题描述

我正在重构博客系统的服务端（ Express.js + Sequelize ）部分，突然发现后台管理页面（ React + AntD ）的滚动出了问题，侧边导航栏不再固定，滚动时会留白：

本来我以为是我不小心改了什么东西，结果发现并没有什么值得注意的地方（后台管理页面在项目的 admin 文件夹内）： https://github.com/songquanpeng/blog/compare/d58e079...master

线上版本为：commit d58e079，是没问题的。

离谱的是，使用 Gitpod 测试该版本（ d58e079 ），发现也出现了该问题。

复现步骤

git clone https://github.com/songquanpeng/blog
git checkout d58e079
npm i
npm run build # linux
npm run build2 # windows
npm start

打开 http://localhost:3000/admin，账户 admin，密码 123456，切换到 Setting tab，选择 Third Party 子 tab，即可发现问题，或者直接把浏览器拉扁，也可发现侧边栏不再固定。

这是最新版本的预览地址：
https://express-react-blog.herokuapp.com/admin/

[Justin13]

样式坏了就找找原因修一修啊。。

[JustSong]

@Justin13 但是关键点是代码是一样的，这就好离谱啊

[KouShuiYu]

@JustSong
供参考，一般 DEV 和 BUILD 下不一致
https://chenkai0520.github.io/web/vue%E6%A0%B7%E5%BC%8Fdev%E5%92%8Cbuild%E4%B8%8B%E4%B8%8D%E4%B8%80%E8%87%B4/

[Justin13]

@JustSong 得先找到问题点，再说代码一样不一样。很多时候自己以为的和实际的完全两回事。

[JustSong]

@KouShuiYu 本地的 dev 和 build 都不行，只有线上的 build 是没问题的

[dingdangnao]

浏览器缓存？

[seki]

看看 css 加载的顺序

[wuweijia]

在本地打包 生成线上代码 run 起来试试

[JerryCha]

开 f12 对样式进行排查。打包前后的样式可能是两码事。

[JustSong]

@dingdangnao 不是这个原因，开了隐私模式也没救
@seki 这是是一致的（毕竟用的版本是一样的）
@wuweijia 本地试过了，Gitpod 上也试过了

[JustSong]

@JerryCha 现在问题是本地打包前后都是有问题的，2333，而线上的版本没问题

[Augi]

一定是线上和本地最终引用的 css 文件有区别，可能是全局互相覆盖的问题，看下找下少了什么样式呗

[liyang5945]

滚动的问题，content-area 元素太高了, ant-layout 设置 overflow: auto 即可

[trolifeyu]

不是侧边栏没固定，而是 table 部分超出父元素了

[SakuraKuma]

你侧边栏不是 relative 的吗 固定啥??

[JustSong]

@liyang5945
@trolifeyu 我最大的疑惑在于为啥之前和线上的没这个问题，明明我也没改样式相关的代码呀
@SakuraKuma 我是想描述侧边栏随页面滚动的这个行为哈

[SakuraKuma]

@JustSong ? relative 不就是会随页面滚动吗, 又没有 fixed

[JustSong]

@SakuraKuma 这里用的 Antd 的默认样式，正常来说侧边导航栏是不会随页面滚动的，我并没有改这里的样式

[jymsy]

sider 上有个 height 100%， 去掉吧？

[vivipure]

找到.ant-layout-content 加个 overflow: auto

[silk]

ant-layout ant-layout-has-sider 去掉高度

[SakuraKuma]

@JustSong 因为你的"正常来说"不正常:doge , 没人设计导航栏会默认固定, 你可以套个 affix 试试.

[DoodleSit]

ant-layout-has-sider

overflow:hidden

======

ant-layout-content

overflow:auto

[ccnotfound]

右边 content 高度超过了屏幕高度 设置右边内容滚动就可以了
.ant-layout-content{
overflow-y: auto;
}

[angusun]

如果不同环境下表现不一致，要不就是动了代码，要不就是动了依赖。

[faceRollingKB]

可能是本地安装依赖的时候更新了依赖版本，跟上次构建时依赖不同导致的

如果可以找到线上版本构建的依赖版本，本地固定 version 测一下应该就能复现

[shilianmlxg]

我也遇到过 element 打包 build 和 dev 环境不一样。依赖问题。还有打包到 main.css 样式覆盖了