工作遇到问题的解决方案

Posted 2021-02-19 jlfw

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的提交 必定是 有改变的）

本文转载于:猿2048https://www.mk2048.com/blog/blog.php?id=hjhchc21ijb