前端开发工作中遇到的bug汇总(备忘录)

1. vux移动端组件库

问题：
在ios系统中用vux-xscroll组件写的界面会出现停止滑动自动回到顶部的问题，找了几个手机试了下，发现升级了ios13的有问题、ios13以下的没有问题、安卓的没有问题。
修复：

1. 找到\node_modules_vux-xscroll@3.1.12@vux-xscroll\build\cmd\simulate-scroll.js
2. 找到getScrollTop方法
3. getScrollTop: function() {
   var transY = window.getComputedStyle(this.container)[transform].match(/[-\d.\de-\d]+/g);
   return transY ? Math.round(transY[5]) === 0 ? 0 : -Math.round(transY[5]) : 0;
   },

2. ios样式兼容问题

问题：
border-radius兼容iPhone的时候会出现和安卓不一样的效果，小圆角变成半圆角
修复：
给该元素添加css -webkit-appearance:none;即可解决兼容问题。

3. IE兼容问题

问题：
IE6中 z-index失效
修复：
给父级添加position:relative
…
问题：
IE6下写一个1px的盒子，可是页面显示高度却是18px
修复：
出现问题的原因—是因为IE6浏览器下默认的行高，解决的方法—添加属性 line-height:1px overflow:hidden;
…
问题：
IE6下空元素的高度BUG，如果一个元素中没有任何内容，当在样式中为这个元素设置了0-19px之间的高度时此元素的高度始终为19px。
修复：
在该元素的css中加入：font-size: 0;
…
问题：
IE6中图片的下方会存在一定的间隙，尤其在图片垂直挨着图片的时候，即可看到这样的间隙。
修复：
将img标签定义为display:block，也可以为img对应的样式写入font-size: 0;
…
问题：
低版本ie解析音频波段失败
修复：
无法修复，因为解析音频波段的一个api低版本ie不支持
…
总结：
实际上IE6中，很多BUG的解决方法都可以使用display:inline、font-size:0、float解决。因此我们在书写代码时要记住，一旦使用了float浮动，就为元素增加一个display:inline样式，可以有效的避免浮动造成的样式错乱问题。使用空DIV时，为其加上font-size:0 这样就很容易避免一些兼容上的问题

4. 不常见抛错

抛错：
Cannot read property ‘call’ of undefined
问题：
报这个错： 路由跳转找不到这个文件或者和路由跳转有关，检查路由或者把这个文件重新发一遍

5. 1px限制问题

问题：
有些浏览器px不能低于1，用0.几实际显示还是1
解决：
如果想要用1px以下，可以用transform有一个截取属性，截取一半就可以，但是要用伪元素的content加一个内容，再给颜色透明，比如boder边框想1px以下，就可以用截取，详见百度

6. element的from的item高度问题

问题：
element的from的item高有问题没办法由内容撑开
解决：
在from上加一个size=“mini”规范from就好了

7. 浮点数问题

问题：
小数点后乘除得到的结果会有浮动
解决：
去除小数点，加减乘除后城上10的小数点长度的平方之类的，看百度