1、1px边框问题
问题:不同的浏览器对于border:1px像素显示的大小不一样
解决方案:可以利用元素的伪类,来设置1px边框
.parent{
position: relative;
height: 100px;
width:100px;
background: yellow;
}
.parent:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
border: 1px solid gray;
transform-origin: 0 0;
transform: scaleY(50%);
}
2、input type='button'在ios和安卓上的默认显示样式不一致
原因:IOS下有默认的按钮渲染方式(颜色渐变和圆角)
解决方案:给所有的input元素设置如下样式,就可以统一默认样式了
input{
-webkit-appearance:none;
}
3、input框聚焦时,外层边框高亮,有背景色
去掉边框高亮的解决方案
input:focus{
-webkit-appearance: none;
}
input{
outline: none;
}
4、ios不兼容js中new Date('2020-01-01') 的写法
问题:后台返回日期的格式为:date=“2020-01-01”,然后在js中利用该数据得到Date对象,即d = new Date(2020-01-01),这种格式初始化在安卓手上是正常的,但是ios上不支持这种格式
解决方式:在调用new Date()方法之前,统一处理好入参的格式,即“2020-01-01” .replace(/-/g, '/'),将“2020-01-01”格式转化为“2020/01/01”形式
5、input. textarea输入框在底部的时候,点击输入框,安卓会出现键盘将输入框挡住了,而ios会将页面整个上移动,但是键盘关闭时候,页面没有自动下移
解决方案:
focus的时候,调用输入框的scrollIntoView方法
失焦的时候,将页面滑动到顶部
<input ref="input" v-model="val" type="text" @focus="focusBlur('focus')" @blur="focusBlur('blur')" />
focusBlur (val) {
if (val === 'focus') {
document.body.scrollTop = document.body.scrollHeight;
} else {
window.scroll(0, 0)
}
}
问题:利用输入框的聚焦和失焦事件来处理会存在这样一种现象,当focus时候,用户输入文字,输入完之后,在输入框聚焦的时候,直接点击提交按钮,会 出现键盘被隐藏,但是提交事件没有触发,需要再次点击按钮,点击事件才会触发。
原因:失焦事件先于点击事件
解决方法:将失焦事件里面的逻辑用setTimeout延后在处理,这样就会触发点击事件,同时也会走失焦的逻辑
6、input框自动聚焦
场景:一进到页面,就让输入框自动聚焦
实现方法:给input框设置属性autofocus,如果没有聚焦的话,就通过给元素添加focus方法聚焦
<template>
<div>
<input type="text" ref="inputElemet">
</div>
</template>
mounted () {
this.$refs['inputElemet'].focus()
}
问题:如果我们在写路由规则时候,用的是import语法异步引入,用上面的写法,在iOS上会出现第一次进页面的时候,不会聚焦,下次进就会聚焦了
原因:webpack会解析import语法,将其文件生成一个bundle,在真正进入该路由页面的时候,才会加载该文件,而加载文件和渲染页面需要时间,而focus的处理也是在一定时间内处理的,当页面渲染完之后,已经过了处理focus事件的时机,所以就会出现不聚焦的情况
解决方案:将路由中的异步引入,改成同步加载
7、input输入框拉起的键盘的右下角按钮文案由“换行”变成“搜索”
<input type=""search>
问题:像上面的写法,在安卓机上,会由“换行”变成了“搜索”,但是在ios上不生效
解决方法:将input放在form中并且在form中设置action的值;input的type=search
<form action="javascript:return true"><input type="search" /></form>
8、type=search的input框在聚焦后会在输入框的右边有个默认的取消按钮
产生取消按钮原因:有的浏览器默认给type=search的input框添加了一个伪元素,即取消按钮
去掉默认取消按钮的方法:
input[type=search]::-webkit-search-cancel-button{
-webkit-appearance: none;
}
8、给输入框的placeholder设置字体颜色
input::-webkit-input-placeholder {
color: #CCCCCC;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #CCCCCC;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #CCCCCC;
}
input:-ms-input-placeholder {
color: #CCCCCC;
}
9、margin-bottom在部分ios下失效
场景:页面底部有一个fixed布局的footer,中间有一个container,本意是当container内容过长的时候,可以拖动页面上滑,使container的内容可以浏览全,不被footer遮住
问题:刚开始给container设置了margin-bottom的值为footer的高度,在安卓手机下可以上拉浏览完container的内容,但是ios下却拖不动页面,导致congtainer底部内容被footer遮住了
解决方案:将container的margin-bottom改成padding-bottom