window.open() 在 ajax 回调中被阻止
由于安全限制,打开新标签的操作需由用户直接触发,使用程序触发默认情况下会被阻止,因此把 winodw.open() 的代码放在事件处理函数中即可解决此问题。
固定在底部的输入框,在 IOS 设备上显示的问题
- 当输入框以 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)
- 输入框被软键盘遮住(系统输入法或者搜狗输入法)
- 输入内容之后,输入框不可见,光标仍在,此时,软键盘的完成按钮,关闭软键盘,然后向下滑动 .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 属性没作用
- Firefox考虑到安全问题,如果要下载的文件和当前页面不是在同一个域名中,将在浏览器中打开。
- 在Chrome和Opera中,如果要下载的文件和当前页面不是在同一个域名中,浏览器会忽视download属性,其结果就是文件名不变。
ie11
- 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日
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>