前端开发常见问题(markdown)

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 {}
   }
 }

在 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 替代。

1. 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日

postion 不设置位置值

position 不设置具体的位置值时，在 魅蓝 手机(魅族系统)存在问题，应避免使用。

margin、padding设置百分比值

margin、padding 在设置百分比值时，取值为：百分比*父元素的width
原因：
因为纵向是可以无限延展的，所以没有一个一定的值可以被参照被用来计算。正常流中的大多数元素都会足够高以包含其后代元素（包括外边距），如果一个元素的上下外边距是父元素的height的百分数，就可能导致一个无限循环，父元素的height会增加，以适应后代元素上下外边距的增加，而相应的，上下外边距因为父元素height的增加也会增加，如此循环。

input date 在 iOS 上水平对齐的问题

在 iOS 设备上，input date 的默认布局是display: -webkit-inline-flex;，因此要更改input date 的对齐模式，应使用flex的对齐方式。

iOS 微信 overflow auto 局部滚动无效的问题

在 iOS 老版本(iOS9)，使用微信时，微信会劫持 touchmove 事件，从而导致局部滚动失效，此时在需要局部滚动的元素或者在其父元素上添加 touchmove="" 或使用 js 绑定事件并阻止冒泡，可以解决这个问题。

重置max-width时的注意事项

应使用min-width: initial;，不要用min-width: auto;，因为使用min-width: auto;时，在 ie 浏览器无效，包括 windows pc版微信。(记录时间: 2019-5-23)

关于 text-decoration 叠加的问题

在给祖先元素设置 text-decoration 之后，对子元素设置text-decoration: none无法清除子元素的text-decoration效果，因此在使用该样式的时候，要注意控制粒度。(记录时间：2019-08-14)

iOS 键盘“搜索”按键

html提供type=search的模式，但是软键盘弹起后，键盘上没有“搜索”，必须在input外层加上form且必须有action属性，监听搜索按钮使用form的submit事件。

<form action="">
	<input type="search" placeholder="" placeholder="请输入搜索" />
</form>