1px边框的问题:
上边框或者下边框 用transform:scaleY|scaleX(0.5);
四个边框的情况 圆角需要加背景颜色,父子级元素加圆角属性
border-radius: 50% 安卓手机兼容问题
在安卓手机border-radius:50% 不是全圆 把rem宽高改为px 或者把rem的值先放大一倍再用scale缩小可以解决
android自带浏览器不支持% 如果兼容我们只能使用一个比较大的值border-radius:999px
android背景色溢出 同时设置border-radius和背景色的时候,背景色会溢出到圆角以外部分,需要是使用 background-clip: padding-box;来修复,但是如果border-color为半透明时,背景直角部分依然会露出来 关于背景剪裁background-clip css 代码: background-clip: border-box|padding-box|content-box; 值描述测试border- box背景被裁剪到边框盒。测试padding-box背景被裁剪到内边距框。测试content-box背景被裁剪到内容框。测试 用box-shadow模拟边框 背景色溢出另一个解决办法就是使用box-shadow模拟border;差不多可以达到效果 比如 box-shadow: 0 0 1px 1px #333333; border: 1px solid #333333;
css3用border-radius画出的圆在手机有毛边 给元素加overflow:hidden
ios端兼容input光标高度 :
高度height和行高line-height内容用padding撑开
ios端微信h5页面上下滑动时卡顿、页面缺失
解决方式时 在公共样式加入-webkit-overflow-scrolling:touch
ios键盘唤起,键盘收起以后页面不归位
失焦的时候设置失焦函数调用 window.scrollTo scrollHeight -1;
安卓弹出的键盘遮挡文本框
----
ios和android下触摸元素时出现半透明灰色遮罩
可设置-webkit-tap-highlight-color:rgba(0,0,0,0)
ios默认输入框内阴影重置
E{
border:0;
-webkit-appearance:none;
}
旋转屏幕的时候,字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 { -webkit-text-size-adjust:100%; }
IOS禁止保存或拷贝图像
长按图片保存场景下,禁止IOS默认识别图像行为
img { -webkit-touch-callout: none; }
IOS中input键盘事件调用缓慢
直接改为监听input事件 document.getElementById('test').addEventListener('input',fn,false);
页面高度渲染错误
document.documentElement.style.height = window.innerHeight + 'px';
取消input在ios下,输入的时候英文首字母的默认大写
<input autocapitalize="off" autocorrect="off" />
来源:稀土掘金