写在前面：人的懒惰真的可以消磨掉好多时间呀～
本文主要记录了在工作中一些关于开发过程中遇到的坑
1.使用vue开发项目时候 图片img 在ios端出现不显示的情况
<img src="https://static.xxx.com/upload/png/0a/cf/0acf4e4e3c35fa2dc631352f3c884c46.png" alt=""> //样式 img { width: 30px; height: 30px; }
background-image: url(‘https://static.xxxx.com/upload/png/d2/79/d279a6d8db305c841b46e9e9cf04a825.png‘);
background-size: 750px 2529px;
分析在图片时候，如果是纯图片，无文字，可以通过background的方式去渲染出图片，但是这一种方式也不是全部的适用，因为background加载在html渲染后，所以html渲染完成后，如果网速过慢，img的图片就会显示不出来，导致页面含有背景的部分是空白的，会影响到体验，在一些其他的方面是不适用的，比如图片验证码，
path2:在img标签外部增加一个块级元素
<div class="red_top"> <img src="https://static.xxxx.com/upload/png/a7/6f/a76f91d68439dabebae9d0a676456f86.png" > </div> // 样式区域写法 这样就完美的解决了 原理就在于外面的个块元素可以设置宽高 img会以父元素的宽度为准显示 .red_top { height: 288px; width: 750px; img { display: block; width:100%; height:100%; //里面不能加东西呀 比如border其他的属性等 } }
对比疑问：标签img和background 到底有什么区别呢？
主要大区别用途：img元素 占位置 可被搜索引擎抓取 background-image 则装饰图片，需要手动设置大小才会占位置，跟随所在元素的大小，占据了元素的全部尺寸，比较细致的介绍可以https://blog.csdn.net/sun_dongliang/article/details/79992386 进行查看
2.输入框问题
相信很多的开发者都会遇到过输入框时候各种问题，ios的软键盘下落时候剩余一个小背景，ios软键盘遮住输入框部分。
ios端关闭软键盘，导致页面表单底部有块空余 灰色那部分就是背景，在点击表单的时候没反应，可能软键盘拉起的时候一直存在一个蒙层，落下后，导致蒙层没有消失。焦点错误等问题。
path1:让输入框输入焦点后 自动滚动到 原来位置
function blur(){ window.setTimeout(function(){ window.scrollTo(0,document.body.clientHeight); }, 500); };
解决了背景被遮挡的问题，但是出现了一个输入框被部分遮挡 这样每次定义num 就差不多的可以解决了
// 获得焦点，window滚动到0，可以自定义位置 function focus(){ window.setTimeout(function(mun){ window.scrollTo(0,num); }, 500); };
.big-wrapper { height: 100%; position: fixed; top: 0; left: 0 } .small-wrapper { height: 90%; position: absolute; width: 80%; top: 50%; left: -50%; transform: translate(-50%, -50%); min-height: 90%; overflow: scroll; }
原文：https://www.cnblogs.com/mfyngu/p/11666982.html