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;
}
