移动端页面在ios上经常出现的问题及解决办法

  移动端页面在ios上经常出现的问题

头部有输入框，聚焦后固定定位失效，排版混乱

解决方法：

头部用绝对定位，中间内容部分设置高100%，给上padding，然后加上overflow：scroll让中间部分可以滚动，

注意：要看所有父盒子高度是否是100%

.top{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 999;
         }
.middle{
            height: 100%;
            padding-top: 104px;
            overflow: scroll;
          }

input上传文件

问题：当有图片或者其他内容绑定到input上时ios点击触发不了上传文件的事件。

最初我的解决办法：

给绑定的label标签加边框,然后在中间加一个加号的图标，点击时一般点击不到图标，这样也能触发事件结构

样式

.picture-label {
        display: inline-block;
        width: 1.6rem;
        height: 1.6rem;
        line-height: 1.6rem;
        margin-top: 0.14rem;
        text-align: center;
        color: #999;
        border: 2px dashed #ccc;
        border-radius: 0.2rem;
      }

最终解决办法：背景图

结构

样式

.picture-label {
      width: 1rem;
      height: 1rem;
      background-image: url(../assets/plus_side.png);
      background-size: 1rem;
	}