页面修改的一些问题总结

问题总结

页面修改初步参考

• 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来给数据预留最小宽度来展示

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

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

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

对齐问题

• 问题描述：文本对齐方向是一个很常见的问题，也很好解决，不多做描述，但是下拉框中的对齐方式用text-right是不生效的，
• 解决方法：用direction:rtl/ltr rtl是左对齐，ltr是右对齐

placeholder 提示文字颜色修改

• 问题描述：input框中有一个placeholder属性，有时候ui会觉得默认的颜色过深或过浅，总之对颜色不满意，需要我们手动再去修改
• 解决方法：

<style>
        input::-webkit-input-placeholder{
            color:red;
        }
        input::-moz-placeholder{   /* Mozilla Firefox 19+ */
            color:red;
        }
        input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
            color:red;
        }
        input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
            color:red;
        }
    </style>

input 获取焦点时边框颜色修改

• 问题描述：一般ui会要求输入框获取焦点时，input会有一个边框出现提示用户正在编辑此条信息
• 解决方法：边框颜色一般会要求设成系统主体色 outline:#804000

按钮点击加黑色边框的问题

• 问题描述：当点击按钮时按钮会有一个黑色的边框显示，根据ui和开发要求时不允许的
• 问题原因：出现点击有黑边框，这种按钮一般是用input输入框来写的，input输入框获取焦点是默认有边框存在的
• 解决方法：outline:none

表格宽度出现不必要滑动条问题

• 问题描述：测试反馈，页面可以将内容显示全面或者不需要滚动条时不应出现滚动条

• 问题原因：出现滚动条是展示内容大于页面显示内容

• 解决方法：

  1. 若页面内容确实不多在1366页面不用滚动条也可展示，可以将table里面的td宽度设为百分比，百分比总和小于等于100即可
  2. 若在1920可显示全在1366显示不全时，可将所有内容的宽度写成固定数值，让她刚好适应1920页面在1366页面出滚动条展示。
  3. 若不论是在1920还是1366分辨率下都不允许出现滚动条，用百分比的来设置但是为了避免页面数据显示不全在td里加折行显示word-break:break-all
  4. 若页面ui框架用的是easyui，可在datagrid里面设置 nowrap:false 不换行fitColumns:false 防止水平滚动

框架问题如表格一侧有边框一侧无边框

• 问题描述：表格一侧有边框一侧无边框
• 问题原因：代码显示正常，因为代码没有任何问题，怎么加代码都不生效，框架问题
• 解决方法：因提测时间紧，逆向思维，既然加不上，就单独去掉左侧的线条，保持统一，经ui沟通可行，border-left:0

当文字过长遮挡后面的图标时

• 问题描述：文字后面有图标，但是当文字内容过长时内容会覆盖图标继续展示
• 问题原因：文字内容没有设置宽度
• 解决方法：文字内容设宽度和显示不小折行显示

提示框留白问题

• 问题描述：提示框内容过少时出现提示框留白情况
• 问题原因：提示框是有固定的宽度和高度限制的
• 解决方法：去除高度和宽度限制，让页面自适应

提示框箭头飘了的问题

• 问题描述：提示框的箭头指向和提示框不一致
• 问题原因：提示框的箭头是相对定位过去的，而原本的提示框是有宽高的，但是现在是自适应，所以在文字内容少的时候会出现这种问题
• 解决方法：F12发现这个箭头是有一个margin-left：100px，找到引用框架的源代码，将它改为margin-left：50px即可。

弹框出现位置根据窗体变化的问题

• 问题描述：弹框本来是居中的，但是当页面向上滚动，再点击让弹框出现时，弹框的位置可能会变
• 问题原因：扒拉弹框引用的源码可知，弹框的位置是根据页面高度自动生成的。
• 解决方法：找到源码修改定义的高宽，让它绝对定位即可

须动窗体才显示文字的问题

• 问题描述：在表格搜索没有数据时，会显示"没有数据"字样，但是页面初次显示时，数据会不显示或显示不完整，动一下窗体，或者按F12，页面时数据都会完整的出现
• 问题原因：排查所有，初次判定可能是给的高度不够，或者没给高度
• 解决方法：在table表格展示文字一栏给它预留一个最小高度，足以保证文字内容可以显示全，注意1920和1366的高度不同问题

一个字换行问题

• 问题描述：若文字内容长度是固定的，一个字换行确实说不过去，若文字内容不固定，此题无解
• 问题原因：换行肯定是长度不够，内容文字固定就加宽，
• 解决方法：若内容文字不固定，经与ui沟通，通过加大行间距来展示

换肤问题总结

• 因为项目很早，放弃使用less/sass，公司引用的web3框架据说是有换肤功能的，但是我这个项目里好像没引，连样式都是自己重新写的。
• 换肤的话，是四个皮肤，那就的写四套样式
• 思路是根据本地存储功能来选择对应的样式
• 在单独的页面重新写一个路径引用，根据本地存储传过来的数值，动态的生成引用的样式
• 然后在原有引用样式得页面将之前得样式替换成这个但页面，
• 工作量挺大得，注意别漏页面
• 样式若有冲突把换肤的样式放在最前面。

复选框，单选框图片和文字对齐得问题

• 问题描述：复选框或单选框和文字对不齐得问题
• 问题原因：由于页面其他样式得影响，
• 解决方法：可以选择在样式里单独加样式避免影响全局得input输入框 input[type='radio',type='checkbox']{vertical-align:top} 数值也可以是具体的数值，也可以是百分比等,根据页面进行调整

复选框，单选框之间得间距问题

• 问题描述：ui有时候会要求这些单选框和复选框会和文字有距离和前后左右有距离
• 问题原因：这个工作量可大可小，看思路怎么想的了，因为后台同事曾经做了一个很可爱的操作，让世界都变得不美好了。他在input后面的文字里加了前后的一个边距，也可以达到效果，哪有多少个页面有多少个input是个未知数，
• 解决方法：在input里加前后边距，写全局样式，只需一行代码。但是有一个不是很完美的地方，就是第一个input输入框距离前面也有间距，不过经过和ui沟通是可以的，也是统一对齐了，不影响界面美观。

安卓端线条显示正常ios端线条缺失问题

• 问题描述：登陆页面有两条线条，在安卓端正常显示，在ios端输入数据的部分线条缺失，只剩下两边的线条。
• 问题原因：最外面的父元素有一个border-bottom：1px solid #ccc,请输入是在input框里写的，input框设置的是border:0,排查原因，将input框里的border加上，在安卓端有明显的错位，将父元素的下面的边框加大，可以显示，但是加大边框和其他样式不一样，继续排查，再检查页面，初步怀疑是input输入框挡着下面的线了，不然也不能显示一半啊，然后检查样式，margin，padding都是0。去掉试一下，是这个问题，但是样式错位，但是找到问题了
• 解决方法：在父元素上加padding，不能加margin，加上下的padding，目的是将父元素的边框和input的输入框保持距离，避免input框遮挡线条，让线条正常显示，为了保持样式统一，建议其他样式也加上上下边距