前端工程师工作中常见问题解决办法(ios底部输入框，a中download，ie11...)

window.open() 在 ajax 回调中被阻止

由于安全限制，打开新标签的操作需由用户直接触发，使用程序触发默认情况下会被阻止，因此把 winodw.open() 的代码放在事件处理函数中即可解决此问题。

 固定在底部的输入框，在 IOS 设备上显示的问题

1. 当输入框以 flex 布局的形式固定在底部，如：

.page {
  height: 100%;
  display: flex;
  flex-direction: column;

  & > .container {
    flex: 1;
    overflow: auto;
  }

  & > footer {
    height: 44px;
    line-height: 44px;

    input {}
  }
}

以上只给出 css 代码，html 代码自行脑补，此时会出现如下问题(测试时间：2017-09-01 12:18:08) 
1. 输入框被软键盘遮住(系统输入法或者搜狗输入法) 
2. 输入内容之后，输入框不可见，光标仍在，此时，软键盘的完成按钮，关闭软键盘，然后向下滑动 .container 的内容，输入框显示正常

 解决办法： 
上述 css 调整如下：

 .page {
   height: 100%;
   display: flex;
   flex-direction: column;
   position: relative;

   & > .container {
     flex: 1;
     overflow: auto;
   }

   & > footer {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 44px;
     line-height: 44px;

     input {}
   }
 }
1

 在 input 聚焦时的事件处理函数中，写如下代码：

 window.setTimeout(() => {
   document.body.scrollTop = document.body.scrollHeight
 }, 200)

 

 ios input disabled 颜色显示太浅的问题

解决办法：

:disabled {
      -webkit-text-fill-color: #666;
      opacity: 1;
      border: 1px solid #DADADE;
}

a 标签的 download 属性没作用 

1. Firefox考虑到安全问题，如果要下载的文件和当前页面不是在同一个域名中，将在浏览器中打开。
2. 在Chrome和Opera中，如果要下载的文件和当前页面不是在同一个域名中，浏览器会忽视download属性，其结果就是文件名不变。

 ie11

1. ie11 不支持 width: initial; 

width: initial; 在 ie 11 无法识别，应使用 width: auto 替代。

• ie11 border-box 对 flex 弹性子元素无效 
  如：flex: 0 0 100px; padding-left: 10px; 此时元素的宽度的为 110px，为避免在 ie 上出现样式不一致的问题，应避免写和上述类似的代码。

 

 query-string 组件

query-string 存在 兼容性 问题，该组件使用了 Object.assign ，以及在构建之后会出现 const 的问题

Map 的简写 

new Map([ [ ‘key’, ‘value’ ] ]) 的语法，babel 在转换的时候，会保留原始代码，iOS 8 不支持这种语法，写的时候应避免出现这种代码。 – 2018年07月11日