项目中遇到的问题一

1.css问题

1.1兼容性

（1）flex布局兼容性

      display: -webkit-box; /* mate8 支持 */
      display: -moz-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;

      -webkit-box-pack: center;
      -webkit-justify-content: center;
      justify-content: center;

      -webkit-align-items: center;
      -webkit-box-align: center;
      align-items: center;

（2）css3兼容：animation transform transition keyframes
-webkit-
（3）iphone X 兼容

        @media only screen and (device-width: 375px) and (device-height: 812px) and
        (-webkit-device-pixel-ratio: 3) {
             //css 注意层级  实在不行加！important
         }

1.2 其他问题

（1）复制粘贴

        html,body{
          -moz-user-select: none; /*火狐*/
          -webkit-user-select: none; /*webkit浏览器*/
          -ms-user-select: none; /*IE10*/
          -khtml-user-select: none; /*早期浏览器*/
          user-select: none;
        }

（2）高度（父元素min-height,子元素：height：100%；无效）
1.给子元素绝对定位，但这样会使得子元素脱流，如果子元素的高度超过父元素高度的时候，父子元素不会呈现一致高度。
css代码

.container{
    min-height:0.6rem;
    position:relative;
}
.text{
    height：100%；
    position:absolute;
}

html代码

<div class="container">
    <div class="text">
    </div>
</div>

2.给子元素加min-height属性
css代码

.container{
    min-height:0.6rem;
}
.text{
    height：100%；
    min-height:0.6rem;
}

（3）垂直水平居中

          position: absolute;
          top: 50%;
          left: 50%;
          transform: translateX(-50%) translateY(-50%);
          -webkit-transform: translateX(-50%) translateY(-50%);

(4) ios点击闪现透明框

html,body{ 
          -webkit-tap-highlight-color: transparent;
          -webkit-touch-callout: none;
     }

2.vue问题

（1）v-cloak:防止在变量确定前出现乱码

&[v-cloak] {
      display: none!important;
     }

（2）v-if与v-show

        v-if  不渲染元素
        v-show 会将元素置为 display：none;
        所以，v-show在弱网情况下容易出现元素重叠

（3）v-for渲染对象与渲染数组
for...in...遍历对象无序，如果想按顺序渲染，可以把对象转化为数组
思路：用Object.keys(obj)取出来对象的所有键值，遍历键值数组，取到对应value值，push进新数组。

        var subjectInfo = []；

        var info = {"exerciseId":739857,"lessonId":50228,"tid":279074733,"exerciseType":27"}；

        var infoKey = Object.keys(info).sort() || [];

          for ( var m = 0, length = infoKey.length; m < length; m++ ){

            info[infoKey[m]].tid = infoKey[m];

            subjectInfo.push(info[infoKey[m]]);

          }

3.fis问题

（1）__inline图片

转载于:https://www.jianshu.com/p/6b8099680a6b