CSS 样式兼容

预计阅读时间: 小于 1 分钟

1.禁止选中复制文本

禁止选中复制文本
1* {
2	user-select: none;
3	-moz-user-select: none;
4	-ms-user-select: none;
5	-webkit-user-select: none;
6}

2.单行文本溢出显示省略号 …

单行文本溢出显示省略号
1p {
2	overflow: hidden;
3	text-overflow: ellipsis;
4	-o-text-overflow: ellipsis;
5	-ms-text-overflow: ellipsis;
6	white-space: nowrap;
7}

3.flex 弹性布局兼容

flex 弹性布局兼容
1#app {
2	height: 100%;
3	display: -webkit-flex;
4	display: -ms-flexbox;
5	display: -webkit-box;
6	display: flex;
7	-webkit-box-orient: vertical;
8	flex-direction: column;
9}

4.iOS app 滑动卡顿优化

iOS app滑动卡顿优化
1.content div {
2	/* 解决iOS页面滑动卡顿 */
3	-webkit-overflow-scrolling: touch;
4	overflow: hidden;
5	overflow-y: auto;
6	/* overflow-y: scroll; */
7}

5.渐变背景颜色

渐变背景颜色
1.box {
2	width: 400px;
3	height: 400px;
4	background: linear-gradient(180deg, #fad961 0%, #f76b1c 100%);
5}

6.隐藏 Web 端浏览器右侧滚动条

隐藏 Web 端浏览器右侧滚动条
1html {
2	-ms-overflow-style: none;
3	overflow: -moz-scrollbars-none;
4	overflow: hidden;
5	overflow-y: scroll;
6	scrollbar-width: none;
7}
8
9html::-webkit-scrollbar {
10	width: 0 !important;
11}