- 当使用
transform:translate3d(-50%,-50%,0)
居中弹框(div)时,在pc端,内部的文字会模糊。
解决办法:不使用transform,使用vertical-align,给要居中的元素设置一个兄弟元素,然后让这个兄弟元素宽度为1,高度为100%,透明度为。代码如下(参考element-ui弹框)
// html
<div class="el-message-box__wrapper">
<div class="el-message-box">
</div>
</div>
// css
.el-message-box__wrapper {
z-index: 2001;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
text-align: center;
}
.el-message-box {
text-align: left;
display: inline-block;
vertical-align: middle;
background-color: #fff;
width: 420px;
border-radius: 3px;
font-size: 16px;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
用
position:absolute/fixed;
把一个按钮固定在页面的底部,在android系统中,当调用输入法时,该按钮会被顶起
解决办法:使用媒体查询@media screen and (max-width:400px){}
当页面高度小于某一个值时,给元素一个top值IOS系统调用第三方输入法时,系统无法监测到input的
input、focus、change、blur
事件
解决办法:计算input值的length
的长度,判断input的值是否变化不同浏览器默认margin,padding不同。
*{margin:0;padding:0;}
不同浏览器的最小字体不同,有的是10px,有的是12px
解决办法:设置字体时,不要小于12px,如果一定要小于12px,使用transform:sacle()
进行缩放透明度opacity
解决办法:IE8 以及更早的版本支持替代的 filter 属性。例如:filter:Alpha(opacity=50)
文字两端居中
text-align:justify;text-align-last:just;
在移动端不起作用
解决办法:使用 ;代替空格使用url传参时,特殊字符无法识别?如"#"
解决办法: 传参时,使用encodeURIComponent(url)
转义,解析url用
decodeURIComponent(url)
删除cookie时,domain和path必须要匹配上,否则删除不掉;设置cookie时,也建议设置domain和path
IOS300ms的点击延迟?
函数简写在移动端部分手机上不支持?
当我们在使用vue进行开发时,会使用函数的简写,比如生命周期函数created(){}
,但是这种写法在移动端不兼容,需要这样写function(){}