html,css相关

1.页面滚动条问题

   (1)灵敏度： -webkit-overflow-scrolling: touch;

   (2)滚动条穿透

    .alpha { height: 100%; overflow: hidden; position: relative;}

    .alpha body { height: 100%; overflow: hidden;}

     给html添加class alpha 并在弹出框事件中控制

2.去除元素点击默认色块

   -webkit-tap-highlight-color:rgba(0,0,0,0);

3.禁止选中

-webkit-user-select:none

4.页面加载滚动条跳动

/*IE9+*/

1:

@media screen and (min-width: 1150px) {

  .wrap-outer {

      margin-left: calc(100vw - 100%);

  }

}

2:

html {

  overflow-y: scroll;

}

:root {

  overflow-y: auto;

  overflow-x: hidden;

}

:root body {

  position: absolute;

}

body {

  width: 100vw;

  overflow: hidden;

}

5.1px问题

li{

  ...

}

li:before{

    position:absolute;

    top:-1px;

    left:0;

    content:'';

    width:100%;

    height:1px;

    border-top:1px solid #ddd;

    transform:scaleY(0.5)

}

6.多行文本溢出

.content{

  display:-webkit-box;

  overflow:hidden;

  text-overflow:ellipsis;

  word-break:break-all;

  -webkit-box-orient:vertical;

  -webkit-line-clamp:4

}

7.图片转blob,base64 (React Croper)

8.修改select样式

.new-select .arrow-container .form-control {

    appearance: none;

    -webkit-appearance: none;

    -moz-appearance: none;

    border-color: #036ba3;

    color: #002a3e;

}

.new-select .arrow-container {

    position: relative;

}

    .new-select .arrow-container::after {

        content: '';

        width: 18px;

        height: 18px;

        background-color: #fff;

        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB3aWR0aD0iMzAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCAzMCAzMCI+CiAgICA8ZGVmcz4KICAgICAgICA8cGF0aCBpZD0iYSIgZD0iTTguNTI0IDEwLjI2M0wuNzM3IDIuMzU0YS44MDYuODA2IDAgMCAxIDAtMS4xNGwuNDc2LS40NzdhLjgwNi44MDYgMCAwIDEgMS4xNDEgMGw2Ljc0IDYuODY3IDYuNzQtNi44NmEuODA2LjgwNiAwIDAgMSAxLjE0MiAwbC40NzYuNDc2YS44MDYuODA2IDAgMCAxIDAgMS4xNDFMOS42NjUgMTAuMjdhLjgxMi44MTIgMCAwIDEtMS4xNDEtLjAwNnoiLz4KICAgIDwvZGVmcz4KICAgIDx1c2UgZmlsbD0iIzAzNkJBMyIgZmlsbC1ydWxlPSJldmVub2RkIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDEwKSIgeGxpbms6aHJlZj0iI2EiLz4KPC9zdmc+Cg==');

        background-size: cover;

        background-position: center;

        position: absolute;

        right: 9px;

        top: 9px;

        pointer-events: none;

    }