css
- line-height 在google和fire 有一像素偏差
- display-inline-block 对齐方式有问题 用 vertical-align:middle
- select option 只有火狐支持 onclick 解决办法 就是迷你select下拉菜单
$(this).find(‘option:selected‘).val();
- 安卓和IOS position fiexd 不一样 安卓没有问题 IOS 动态设置 absolete 模拟fixed
display: flex;
align-items: center;
justify-content: center;
用这个写在外围,里面的盒子就能图文上下左右居中
&::after{
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 1px;
content: ‘‘;
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
background-color: #e2e2e2;
}
<!--写出Boder底部0.5px的线-->
水平垂直居中 盒子
<div class="box">
<div class="con"></div>
</div>
<style type="text/css">
.box {
width: 300px;
height: 300px;
background: #111;
display: flex;
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
}
.box .con {
width: 100px;
height: 100px;
background-color: #fff;
}
</style>
fixed 与 input
刚接触移动端 Web 开发的小伙伴应该都会听前辈们说过,不要在有 input 标签的页面使用 fixed 定位,因为这两者在一起的时候,总是会有奇奇怪怪的问题。
在 iOS 上,当点击 input 标签获取焦点唤起软键盘的时候,fixed 定位会暂时失效,或者可以理解为变成了 absolute 定位,在含有滚动的页面,fixed 定位的节点和其他节点一起滚动。
其实这个问题也很好解决,只要保证 fixed 定位的节点的父节点不可滚动,那么即使 fixed 定位失效,也不会和其他滚动节点一起滚动,影响界面。
但是除此之外,还有很多坑比较难以解决,例如 Android 软键盘唤起后遮挡住 input 标签,用户没法看到自己输入的字符串,iOS 则需要在输入至少一个字符之后,才能将对应的 input 标签滚动到合适的位置,所以为了避开这些难以解决的坑,在有表单输入的页面,尽量用absolute 或者 flex 替换 fixed。
ajax 缓存
1.ajax缓存只对GET方式的请求有效,而浏览器认为POST请求提交表单内容必定有变化,所以不走缓存。
2.在默认的情况下,一般发送ajaxget请求,IE浏览器第一次会向服务器端请求,获取最新数据,如果地址和参数不变,第二次及以后再发送请求,
它就默认获取的缓存数据,这样的问题是ie中很常见的问题,一般POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的)