90%的前端都会踩的坑

       移动开发时代，前端同学刚刚送别了让人头秃的IE浏览器，却发现憧憬已久的移动互联网时代并不是想象中那般美好。各种棘手的系统兼容问题和浏览器兼容问题怎么也让人高兴不起来。作为一名工作不足3年的前端程序媛，始终相信好记性不如烂笔头。每次在项目开发过程中踩到的坑，都习惯性地记录了下来。昨日一瞥竟积少成多，稍感诧异。因此分享出来，希望对大家能有所帮助。

兼容问题：

1、iconfont 字体在钉钉应用里面加载不出来（或者是乱码）的问题引入iconfont字体的时候，需要按照顺序把字体依次引入。正确的顺序如下：

@font-face {
    font-family: "djicon";
    src: url('./iconfont.eot'); /* IE9*/
    src: url('./iconfont.svg#iconfont') format('svg'), /* iOS 4.1- */
    url('./iconfont.woff') format('woff'), /* chrome、firefox */
    url('./iconfont.ttf') format('truetype'); /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
}
// 参考文档：https://www.cnblogs.com/Megasu/p/4305116.html

2、PC端ueditor 编辑的文案及图片拉伸问题，背景是 后端返回是html片段

node - cheerio模块，操作dom字符串比较方便，实际案例：
解决了 PC端图片在移动端展示的问题参考文档：

cheerio - npm

width: number = 784 代表pc端宽度 
regHtml(str: string){
    // 参数是html片段 
    let _this = this; 
    const $ = cheerio.load(str);
    $('img').each(function(index,element){
        let attr = element.attribs //元素的属性 
        // 屏幕宽度 
        let docEl = document.documentElement 
        let clientWidth = docEl.clientWidth
        if(attr.width){ //如果设置了宽
            // 图片宽度/屏幕宽度的比例 
            let rate = attr.width /_this.width 
            //图片的宽高比例 
            let wh = attr.width/attr.height 
            $(element).attr('height', _this.rate*clientWidth/wh)
            $(element).attr('width', _this.rate*clientWidth)
            $(element).attr('style', '') 
            $(element).attr('class', 'img-skew') 
        } 
    
    }) 
    return $.html() 
    
}

4、上传图片，iPhone7 iPhone7p在上传图片的时候，传不过去图片的name

解决方案：手动添加图片name

let data = new FormData();
data.append("fileName", file[0],file[0].name);

5、ios微信打开网页键盘弹起后页面上滑，导致弹框里的按钮响应区域错位

解决方案：手动把滚动条滚到底部写一个自定义指令。

import Vue from 'vue';
Vue.directive('blur', {
    'bind'(el) {
        el.addEventListener("click", function(){
            window.scrollTo(0,0);
        })
    }
}); 
//在点击页面提交按钮的时候，把滚动条滚到底部就OK了

6、微信浏览器调整字体后，页面错位。

解决方案：阻止页面字体自动调整大小

// 安卓：
(function() {
  if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
    handleFontSize();
  } else {
    if (document.addEventListener) {
      document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
    } else if (document.attachEvent) {
      //IE浏览器，非W3C规范
      document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
    }
  }
  function handleFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    // 重写设置网页字体大小的事件
    WeixinJSBridge.on('menu:setfont', function() {
      WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
    });
  }
})();

//iOS：
// ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;}

使用rem进行屏幕适配，设置好root元素的font-size大小，然后在开发的时候，所有与像素有关的布局统一换成rem单位。

8、iOS下取消input在输入的时候英文首字母的默认大写

<input type="text" autocapitalize="none">

9、禁止 iOS 识别长串数字为电话

<meta name="format-detection" content="telephone=no" />

10、禁止ios和android用户选中文字

-webkit-user-select: none;

11、一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发

只需要对不触发click事件的元素添加一行css代码即可：

cursor: pointer;

vue相关问题：

1、vue 如何获取拉回数据后图片的高度？

<img
    :src="filePicture"
    alt
    class="imgPicture"
    v-if="filePicture"
    ref="myImg"
    @load="imageFn"
>
 imageFn() {
    console.log(this.$refs.myImg.offsetHeight);
    console.log(this.$refs.myImg.offsetWidth);
 },

2、vue中同一个dom节点，v-if与v-for不推荐同时使用，官方解答：

不推荐同时使用 v-if 和 v-for。 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

3、vue v-for 中更改item 属性值后，v-show不生效的问题

添加this.$forceUpdate();进行强制渲染，效果实现。
因为数据层次太多，render函数没有自动更新，需手动强制刷新。

4、element UI 自定义传参的解决方法

这里的handleSelect默认绑定的参数是选中的那条数据。如果一个页面有好几个相同的组件，要想知道选的是哪个？

<el-autocomplete
    v-model="state4"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    @select="handleSelect"
></el-autocomplete>

解决方案：

<el-autocomplete
    v-model="state4"
    :fetch-suggestions="querySearchAsync"
    placeholder="请输入内容"
    @select="((item)=>{handleSelect(item, index)})"
    // 写个闭包就可以了，index表示第几个组件
></el-autocomplete>

5、element-UI 框架 el-input 触发不了 @key.enter事件

<el-input v-model="form.loginName" 
placeholder="账号" 
@keyup.enter="doLogin">
</el-input>

解决方案：使用@key.center.native

<el-input v-model="form.loginName"
placeholder="账号" 
@keyup.enter.native="doLogin">
</el-input>

样式问题：

1、父元素设置了border-radius，子元素应用了transform，并且父元素设置了overflow:hidden，但是却失效？

// 给父元素设置 
{
    position:relative;
    z-index:1;
}

2、设置input 文本框的 placeholder 的颜色

input::-webkit-input-placeholder{
    color:rgba(144,147,153,1);
}

3、如何设置body背景色，height:100%,不生效？

同时设置html，body的高度

html,body{
    height:100%；
} 
或
body{
  height: 100vh; // 代表占屏幕100%
}

4、一像素边框的问题

.row {
  position: relative;
  &:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    border-bottom:1px solid #e6e6e6;
    color: red;
    height: 200%;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    pointer-events: none; /* 防止点击触发 */
    box-sizing: border-box;
  }
}

5、css属性touch-action:none;

该属性会导致安卓页面无法滚动，慎用!

6、去除ios 手机端input输入框的内阴影

input{ 
    -webkit-appearance: none; 
}

7、安卓手机端div里面在包一层div，文字展示不居中的问题。

最好给div设置padding ，不固定高度和不设置line-height；

8、iOS端input输入框光标错位

是由于fixed定位引起的，改成absolute就解决了。

.box{
    position: absolute; 
}

9、div实现背景色和背景图片同时存在

{
    background-color: #fff;
    background-image:url('../../assets/img/model-bg.png');
    background-repeat: no-repeat;
}

10、css 制作椭圆

border-radius可以单独设置水平和垂直的半径，只需要用一个斜杠（/）分隔这二个值就行。

此外我们还要知道border-radius不仅可以接受长度值还可以接受百分比值。

{
    width: 150px;
    height: 100px;
    border-radius: 50%/50%; //简写属性：border-radius:50%
    background: brown;
}

11、图片居中显示

object-fit: cover;

交流

共同进阶学习

    

学习之余，大家一起来薅羊毛喽，各取所需。