当前位置: 首页 > java >正文

Vue 跳转页面,第一次进页面,会出现样式混乱,刷新后即恢复正常(问题已解决)

问题

如图,页面跳转进来,会出现左右两侧底部没有对齐的情况,刷新页面之后 就好了

在这里插入图片描述

刷新后

在这里插入图片描述

网上也看了很多博客,都没有解决问题,下面就记录一下我的排查经过,及处理方式

排查经过

1.是否因为路由跳转 导致的样式还没加载过来,加了处理方法后还是没有成功;(x)

2.style标签 中是否加入 scoped属性?header 给100% (x)

3.是不是网络问题,导致样式没有加载完全,排查网络运行速度及页面加载情况 (x)

4.最笨的方法,一个一个元素进行排查,一个一个样式进行查看,发现 父组件有一个高度 没有写,导致的页面样式错乱 (√)

.nstAudio 作为父级,没有 给height :100%,导致的。
在这里插入图片描述

修改后

在这里插入图片描述

tips:建议 大家在写样式的时候,还是要多注意一下,仔细一些,在这个坑上面花费了一上午的时间,基本上和重新写没什么区别了,,特此记录一下下。也是为了提醒自己。

http://www.xdnf.cn/news/13767.html

相关文章:

  • 进程和计划任务管理
  • 剑指offer23_树的子结构
  • ESP32S3 关于使用INMP441麦克风 和MAX98357AETE功放进行录音和播放
  • 复现论文报错解决
  • 新手速学:在线投票制作系统操作详细步骤
  • centos clamav 扫描及告警配置
  • 内网渗透测试技巧与利用操作手册(SMB / MSSQL / LDAP)
  • 全志A33安卓6.0添加支持usb摄像头动态热插拔
  • 换颜色 算法笔记
  • 新能源知识库(46)EMS与协控装置
  • 【深度学习-Day 27】模型调优利器:掌握早停、数据增强与批量归一化
  • 使用 C/C++的OpenCV 将多张图片合成为视频
  • 从零开始学Python(3)——函数
  • 第十三节:第七部分:Stream流的中间方法、Stream流的终结方法
  • 4、程序的固化和下载(一)
  • 《TCP/IP协议卷1》第11章 UDP:用户数据报协议
  • Error:Cannot find module ‘body-parser‘ | Require stack
  • 基于LQR控制算法的Simulink仿真
  • Harbor 2.12.2 and 2.12.3 初始化密码错误
  • 深度学习的分布式训练与集合通信(三)
  • 解决IntelliJ IDEA配置文件application.properties乱码的问题
  • 模型后处理可能包含的内容
  • Docker Docker Compose 一键安装
  • Ubuntu apt-get安装-报错:尝试“apt --fix-broken install”有未能满足的依赖关系,几种解决办法
  • 406. Queue Reconstruction by Height
  • 安装 Poppler(Windows)
  • Actix-web 中的权限中间件实现
  • 论文略读:Large Language Models Assume People are More Rational than We Really are
  • SQL进阶之旅 Day 27:存储过程与函数高级应用
  • 自检该如何写