一些我遇到前端方面的问题和解决方法
1. 滚动
移动端滚动只能用手指进行滑动，在ios5之前，overflow:scroll不被支持，但是在ios5之后，该属性已经被支持，如下
{
overflow:scroll;
-webkit-overflow-scrolling:touch;/*要加上这个*/
}
2. 三列布局，两边自适应中间定宽
怎么说呢，我在实习的时候遇到一个问题，一个三列布局，两边自适应中间定宽。
原先使用CSS3的弹性布局：
在父元素上display: flex;，在两边需要自适应的元素中flex: 1;,中间的元素定宽。
但是在测试的时候发现这样的方式在 android一个低版本的（记得是vivo Y33） uc的浏览器（具体是那个版本的忘记了）上，出现了样式混乱(不用说用display:box,已经使用过了，还是无效。关于box和flex的区别，这里推荐一个知乎上的问题回答 https://www.zhihu.com/question/22991944
最后采用了替代方法，举个栗子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent {
width: 100%;
height: 300px;
position: relative;
background: red;
overflow: hidden;
}
.left {
float: left;
width: 50%;
height: 100%;
-webkit-transform: translateX(-16px);
transform: translateX(-16px);
background: pink;
}
.right {
float: right;
width: 50%;
height: 100%;
-webkit-transform: translateX(16px);
transform: translateX(16px);
background: green;
}
.center {
position: absolute;
width: 32px;
height: 100%;
left: 50%;
-webkit-transform:translateX(-50%);;
transform: translateX(-50%);
background: blue;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
3. 对于不支持HTML5标签的旧浏览器，无法对这些元素设置样式怎么办？
https://modernizr.com/
这个插件可以帮忙，ps：要在最前面引入哦
4. 表单的自动填充问题
在写表单页面的时候，比如登录必须包含：用户名和密码。
简单的样栗子：
<form action="http://localhost/dome/login.php" method="post">
用户名：<input type="text" name="name"/>
密 码：<input type="password" name="password" />
<button type="submit">登录</button>
</form>
这就一个完全没有样式的一个登录，不要太介意
第一次，我们输入正确的用户名和密码，然后登录成功了。
如果浏览器有自动记住密码的话，下一次你打开的时候就会是
伐开心...有个黄色的背景色
但是可以在CSS中添加下列代码就可以去掉
input:-webkit-autofill {
background-color: white;
background-image: none;
color: #000;
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
我们有些时候不想它自动填充表单，怎么办呢？
第一种方法，autocomplete="off"，新的input属性。
第二种方法，如果不支持这个新属性呢？
表单填充是根据type="password"来填充的，如果表单中没有type="password"的input标签，不就好了.可以将密码框的type=“text"，监听focus事件，动态改变它的type为"password"。
<form action="http://localhost/parabola-fe/demo/login.php" method="post">
用户名：<input type="text" name="name"/>
密 码：<input type="text" name="password" id="pw"/>
<button type="submit">登录</button>
</form>
<script>
$("#pw").on("focus",function(){
try{
$(this).attr("type","password");
}catch(e){
//IE中type不可写
$(this).after("<input type='password' name='password' />")
$(this).remove();
}
})
</script>
这样就可以啦~
