分享几个在开发中遇到的一些小问题
1、修改chrome记住密码后自动填充表单的黄色背景
主要通过input : -webkit-autofill来进行修改！
input:-webkit-autofill {
background-color: #FAFFBD;
background-image: none;
color: #000;
}
2、修改输入框placeholder文字默认颜色-webkit-input-placeholder
input标签的placeholder 属性我们都常用到，它用来显示提示信息。提示会在输入字段为空时显示，并会在字段获得焦点时消失。这很好用。但placeholder 属性对于的样式控制却比较烦人啦。
::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #909;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #909;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #909;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #909;
3、iOS safari 阻止“橡皮筋效果”
可以参考一下知乎上的回答 链接在此；
但是，我们遇到的问题不是这样，我是要解决弹跳导致弹出层（position:absolute）的覆盖层高度小于100%;
针对这个问题，我想到的解决方案如下：
方法一： 把position:absolute改成position:fixed，并在弹出层之后，设置body的高度是100%；overflow是hidden。
方法二：
思路是获取苹果浏览器导航栏的高度。然后滚动的时候，重新获取其高度。在导航栏高度变小的时候，给弹出层增加高度的百分比！
代码如下：
//ios safari 伸缩判断
var topbarHeight=window.outerHeight-window.innerHeight,agent=navigator.userAgent,globleflag=true;
$(window).scroll(function () {
if(agent.indexOf("iPhone")!=-1 || agent.indexOf("iPad")!=-1){
var topbarHeightNow=window.outerHeight-window.innerHeight;
if(topbarHeightNow<topbarHeight){
globleflag=false
//此处写处理逻辑
}else{
globleflag=true
//此处写处理逻辑
}
}
手机阅读请扫描下方二维码：
上一篇：index总结和移动兼容问题
下一篇：上传图片样式统一及注意事项小结
1
1
1
1
1
1
1
1
1
1
1
1
1