Catalog
  1. 1. 前端显示异常
    1. 1.1. 背景
    2. 1.2. 排查过程
    3. 1.3. 总结
text-indent

前端显示异常

背景

今天公司同事发现了一个前端问题,在点击打开带有checkbox的下拉框时,存在下拉框对应显示空格定位异常,
具体表现为

  • 在chrome70版本下显示正常
  • 在chrome79版本下出现如下问题
    • 当元素数量过多,存在overflow-y的情况下,显示正常
    • 当元素数量不充足时,下拉行整体往左便宜,显示异常
    • 当显示异常时,打开控制台,任意修改一css样式,页面重新渲染正常

排查过程

  1. 观察页面,判断是否有往左偏移的代码,当时没有找到,猜测是其他方式实现
  2. 检查源码,该项目属于老项目,下拉菜单通过jsp中的js代码硬编码而成,查看的非常痛苦,检查后没有发现js逻辑问题
  3. 尝试修改checkbox实现方式,通过替换原先笔者给其他同事完善的一份,结果样式显示正常
  4. 初步确定为是css样式问题,由于js绑定了一系列的对应操作,替换checkbox方案需要时间过长,尝试修复该问题
  5. 继续观察页面,根据修改样式后,页面显示正常,尝试特殊方法修复,在下拉菜单展开后手动触发checked=>not checked状态变更操作,期待能自动适应
  6. 测试结果发现未能显示正常
  7. 求助前端组同学,通过控制变量法,发现修改完text-indent元素后,页面变更无异常
  8. 将下拉菜单往左偏移方案由 text-index: 10px 修改为 padding-left: 10px 显示正常

总结

在查询caniuse后发现,各个浏览器对 text-indext 属性适配存在一定的问题,提示为不完美适配

吃一堑长一智,针对此类css样式,往后谨慎使用,以免发现类似情况

Author: tuean
Link: http://tuean.cn/2019/12/23/text-indent/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.
Donate
  • 微信
  • 支付寶

Comment