问题总结

页面修改初步参考

• ui设计要求最多的是页面统一，如按钮框的颜色，形状，文本的对齐方式等（会精确到1px）
• 色号不知道怎么选的用系统主色。
• a标签使用建议，须重新设置颜色一般根据ui的建议是系统主色，避免使用自带的蓝色，去掉下划线，鼠标经过时出现下划线

常见问题及修改意见

表格线条不统一问题

• 问题描述：表格线有单线条和双线条

• 问题原因：代码中出现表格嵌套问题，两个表格都有线条，两个表格交接处出现线条重复

• 解决方法：

  1. 若页面中粗线条只有一个，就简单粗暴解决将此位置的border设为0，常用的有border-bottom:0或border-top:0

  2. 若页面中线条混乱，就从源头解决，

     • 定位页面
     • 找嵌套table的代码位置
     • 外层table设置 <table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;”>
     • 内层table设置<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse;border-width:0px; border-style:hidden;">

     ​

文字内容溢出折行问题

• 问题描述：页面中会出现文字显示不全的问题
• 问题原因：有的数据内容长度不固定，我们要考虑屏幕的宽度和ui设计图，无法实现在同一行将所有数据内容全部展示
• 解决方法：
  1. pc端和ui沟通可将文字折行实现数据全部展示 word-break:break-all
  2. 移动端app，可实现滑动效果 overflow-x:auto，也可实现折行展示

表格列对不齐问题

• 问题描述：ui会要求表格上下两行中对应的列整体统一对齐

• 问题原因：

  1. 页面中宽度百分比不一致
  2. 表格中宽度是有内容撑开的，并无宽度百分比

• 解决方法：

  1. 宽度百分比最好上下统一，且建议百分比和为100%
  2. 表格中若内容过长，将表格撑开用折行方法保持表格宽度不变word-break:break-all

分辨率下数据展示不一致问题

• 问题描述：在1920分辨率下数据正常显示不换行，在1366分辨率下数据换行，但不想让它换行
• 问题原因：在1366分辨率下宽度不够，将其内容挤的换行了，页面用的宽度是百分比，1366宽度不够
• 解决方法：因为内容数据是固定的，即长度固定，我们可以用固定宽度来设置，如50px即可展示所有内容，可用min-width:50px来给数据预留最小宽度来展示

测试和开发显示页面不一致问题

若禅道中的问题在开发电脑上无法复现：

建议查看测试电脑页面是否缩放，字体是否调成了最大