一、html部分
1.取消iPhone自動識別數字為撥打號碼
2.移動開發、響應式佈局
二、css部分
1.字母強制大寫
text-transform: uppercase;
2.解決iPhone中overflow:scroll;滑動速度慢或者卡的問題
-webkit-overflow-scrolling: touch;
3.防止複製,兼容主流瀏覽器
-moz-user-select : none;
-webkit-user-select: none;
4.固定背景圖片
background-attachment: fixed;
5.去除iphone input默認樣式
input {
-webkit-appearance:none;
}
6.設置表格的邊框合併為一個單一的邊框
border-collapse:collapse;
7.添加(顯示)IOS下滾動條
.box::-webkit-scrollbar{
-webkit-appearance: none;
width: 14px;
height: 14px;
}
.box::-webkit-scrollbar-thumb{
border-radius: 8px;
border: 3px solid #fff;
background-color: rgba(0, 0, 0, .3);
}
8.文字超出部分省略號隱藏
.box{
width: 200px;
/** 單行顯示隱藏 **/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/** 多行顯示隱藏 **/
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box; /** 對象作為伸縮盒子模型顯示 **/
-webkit-box-orient: vertical; /** 設置或檢索伸縮盒對象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 顯示的行數 **/
overflow: hidden; /** 隱藏超出的內容 **/
}
9.設置表格佈局(我都不知道為什麼我的筆記.txt裡面會有這個...)
table{
table-layout:fixed;
}
10.如果想鼠標移動上去時顯示被隱藏的文本內容,可以設置
.box:hover {
text-overflow:inherit;
overflow:visible;
}
11.css實現選中checkbox,文字內容顏色變化
閱讀更多 小菜鳥程序員 的文章