web、webapp前端开发过程中遇到的问题的常用处理方式整理和一些问题整理。
常见问题处理方式
单行文字垂直居中
html结构
1
|
<div class="row">单行文字垂直居中，单行文字垂直居中，单行文字垂直居中</div>
|
css样式
1
2
3
4
5
6
7
|
.row {
display: block;
height: 100px;
line-height: 100px;
width: 600px;
background-color: #d5effc;
}
|
多行文字垂直居中
html结构
1
2
3
|
<div class="wrap">
<div id="content">多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中</div>
</div>
|
css样式
1
2
3
4
5
6
7
8
9
10
11
12
|
.wrap {
display: table;
width: 600px;
height: 150px;
background-color: #f780a4;
}
#content {
display: table-cell;
vertical-align: middle;/**垂直居中**/
}
|
单行文本溢出
html结构
1
|
<div class='text-overflow'> 单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出 </div>
|
css样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<!-- css -->
.text-overflow {
width: 200px;/**设置显示的长度**/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow: ellipsis;
/* IE/Safari */
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
/* Opera */
-moz-binding: url("ellipsis.xml#ellipsis");
/*FireFox*/
background-color: #f4cd89;
}
|
文本内容自动换行
1
2
3
4
|
word-break{
word-wrap: break-word;
word-break: normal;
}
|
多行文本溢出
html结构
1
2
|
<div class='more-text-overflow'>webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出
</div>
|
css结构
1
2
3
4
5
6
7
8
|
.more-text-overflow {
width: 600px;
display: -webkit-box;
-webkit-line-clamp: 3;/*显示的行数,多余的行数将被隐藏*/
-webkit-box-orient: vertical;
overflow: hidden;
background-color: #dcf791;
}
|
表格细边框设置
1
2
3
4
|
table,table th,table td{
border:1px solid #999;
border-collapse: collapse;
}
|
hr细边框
1
2
3
|
hr{
height: 1px; background:#ccc; border:0;
}
|
禁止长按链接与图片弹出菜单
1
2
3
|
a, img {
-webkit-touch-callout: none;
}
|
清除手机点击页面标签时候出现高亮
1
2
3
|
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
|
改变选中的内容的样式
1
2
3
4
5
6
7
|
::selection{
color:#ff0000;
}
::-moz-selection{
color:#ff0000;
}
|
禁止用户选中文本内容
1
2
3
4
5
6
|
.content {
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
}
|
高分辨率屏幕下1px处理方式
全部细边框
html结构
1
2
3
|
<body>
<div class="box retina-border rt-bd-all"></div>
</body>
|
css样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
.box {
width: 200px;
heigth: 100px;
box-sizing: border-box;
border: 1px solid #aaa;
}
/* 去掉元素原有的边框 */
.retina-border {
position: relative;
border: none;
}
/* 通过设置伪元素放大到2倍的宽高，设置1px边框，再缩小1倍，以达到0.5px边框的效果*/
.retina-border:after {
content: '';
display: block;
width: 200%;
height: 200%;
position: absolute;
left: 0;
top: 0;
box-sizing: border-box;
border: 0px solid #aaa;
-webkit-transform-origin: left top;
transform-origin: left top;
-webkit-transform: scale(.5);
transform: scale(.5);
}
.rt-bd-all:after {border-width: 1px;
}
|
** 部分变细边框**
html结构
1
2
3
|
<body>
<div class="box retina-border rt-bd-b"></div>
</body>
|
css样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
.tr-bd-b:after {
border-bottom-width: 1px;
}
.tr-bd-t:after {
border-top-width: 1px;
}
.tr-bd-l:after {
border-left-width: 1px;
}
.tr-bd-r:after {
border-right-width: 1px;
}
|
垂直居中
html结构
1
2
3
|
<div class="wrap">
<div class="box"></div>
</div>
|
** 模仿单行文字居中的方式**
1
2
3
4
5
6
7
8
9
10
|
.wrap {
width: 200px;
height: 80px;
line-height: 80px;
}
.box {
display: inline-block;
vertical-align:middle;
}
|
** 已知宽高，通过position:absolute;**
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
.wrap {
width: 200px;
height: 200px;
position: relative;
}
.box {
width: 100px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -40px;
}
|
未知宽高，通过css3属性 transfrom
1
2
3
4
5
6
7
8
9
10
11
12
13
|
.wrap {
width: 200px;
height: 200px;
position: relative;
}
.box {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
|
** 通过flex布局**
html结构
1
2
3
|
<div class="wrap flexbox flexbox-center flexbox-middle">
<div class="box"></div>
</div>
|
css样式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
.flexbox {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
/* 水平居中 */
.flexbox-center {
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
/* 垂直居中 */
.flexbox-middle {
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
|
safari浏览器下div中的滚动卡顿不流畅解决方法
div样式表中添加如下属性
1
2
3
4
|
div {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
|
或者使用
iscroll.js
让元素能看见但是不能点击
1
2
3
|
div{
pointer-events: none; // div能看见但是不能点击
}
|
开发常见问题整理
ios(9.3.1)不支持css3属性calc嵌套使用，例如
width:calc( calc( 100% - 90px ) / 2);
ios 设备用jquery live绑定 click 事件不管用
动态拼接的html追加到页面，使用 live 绑定click事件不起作用的解决办法
解决方法1：直接在标签写onclick事件
解决方法2（推荐）：给需要绑定的标签添加css样式｛cursor:pointer｝，让它认为你是一个可以点击的标签。
低版本手机不支持模板字符串
一些低版本的android手机不支持es6的模板字符串，如果js中存在模板字符串，js直接不会被加载解析。
微信浏览器页面禁止下拉显示网址信息
禁止下拉显示网址信息
常见布局方式
flex等间布局
查看效果
