目录

1.只针对打印模式修改css

demo.html 
1
2
3
4
5
6
 
<style type="text/css" media="print">
    img
    {
        display:none;
    }
</style>

2.CSS实现单行、多行文本溢出显示省略号

demo.css 
1
2
3
4
5
6
7
8
9
10
11
12
13
 
// 单行省略
.single{
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
//多行省略 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端
.multi{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

3.js判断浏览器类型，以及是否为手机端

demo.js 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
var browser={
    versions:function(){
    var u = window.navigator.userAgent;
    return {
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/)||!!u.match(/AppleWebKit/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或者uc浏览器
        iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1, //是否为iPhone或者安卓QQ浏览器
        iPad: u.indexOf('iPad') > -1, //是否为iPad
        webApp: u.indexOf('Safari') == -1 ,//是否为web应用程序，没有头部与底部
        weixin: u.indexOf('MicroMessenger') > -1 //是否为微信浏览器
        };
    }()
}
console.log(" 是否为移动终端: "+browser.versions.mobile);
console.log(" ios终端: "+browser.versions.ios);
console.log(" android终端: "+browser.versions.android);
console.log(" 是否为iPhone: "+browser.versions.iPhone);
console.log(" 是否iPad: "+browser.versions.iPad);

4.对接支付宝支付接口

通过后台接口返回一串字符串形式的html表单，将它渲染到页面上，由于是异步渲染的表单，所以需要手动触发submit事件

demo.vue 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<template>
    <div v-html="ZFBForm"></div>
</template>

<script>
    export default {
        data() {
            return {
                ZFBForm: null
            };
        },
        mounted(){
            this.ZFBForm = res;
            this.$nextTick(() => {
                document.forms["alipaysubmit"].submit();
            });
        }
    }
</script>

5.打印html时自动分页

在需要分页的地方加上以下css即可 这个属性好像对原始table结构更友好些，不知为什么，在div结构内存在table时，使用此属性，会出现table的thead在tbody内出现多余重叠现象，原因不明

demo.css 
1
2
 
page-break-before:auto;
page-break-after:always;

6.高分辨率移动端下，img与img衔接顶部会出现1px的空隙问题


demo.html 
1
2
 
<img src="img1.jpg" alt="" class="full-img">
<img src="img2.jpg" alt="" class="full-img">
demo.css 
1
2
3
4
 
.full-img {
  width: 100%;
  display: block;
}

尝试了许多方法： 1.
demo.css 
1
2
3
4
5
 
.full-img {
  width: 100%;
  line-height: 0;
  vertical-align:top; // 或者bottom
}

2.在img外围包裹一个div，将div的font-size设为0

都无效

最后只能加个margin-top:-1px来 hack 一下

demo.css 
1
2
3
4
5
6
 
.full-img {
  width: 100%;
  display: block;
  //hack 高分辨率手机下会出现img之间1px的间隙
  margin-top: -1px;
}

不过话说回来，要解决两个inline-block元素之间的间距问题，将其父元素的font-size设为0真的很管用

7.当div的宽度为百分比时，如何设置高与宽相等，即自适应正方形

demo.css 
1
2
3
4
5
6
 
div {
  width: 20%;
  height: 0; /* 设置高为0，让padding撑起高 */
  padding-bottom: 20%; /* 让div的高等于宽 */
  border-radius: 50%;
}

此时将padding-top/padding-bottom设置为百分比时，是基于父元素宽度，正好和width相等

8.Uncaught TypeError: $(…).datepicker is not a function

在js项目中遇到这个问题，但是检查了需要引入的jquery文件和插件js文件，也确认了引用条件和语法问题，都没有问题，百思不得其解
后来才发现，项目中同时引用了两个jquery文件，才导致datepicker插件无法使用
因此只要删除其中一个js即可

9.transform:translate (-50%,-50%) 造成文字模糊的问题

有时候需要让一个元素垂直水平居中，最常用的一个方案就是给元素absolute定位，设置top:50%;left:50%;,并且使用transform:translate (-50%,-50%)纠正定位。但这种方案有时候会出现文字模糊的问题。

  1. 问题原因：
    因为transform时div的宽度或者高度并不是偶数，移动50%之后，像素点并不是整数，出了小数，和显示像素没有对上。

  2. 解决方案

    1. 方案一：将元素宽高设置成偶数
    2. 方案二：使用flex完成垂直居中，设置排列方向为column，并设置justify-content: center，最后用text-align: center完成水平居中
    3. 方案三：或者其他垂直居中方案。此处不再列举。

10.input 的placeholder会出现文本位置偏上的情况

  1. 问题表现
    input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上

  2. 解决方案
    设置line-height：normal

11.ios端滚动页面时，fixed元素出现浮动或者抖动的问题

  1. 解决方案
    1. 方案一：
      demo.html 
      1
      2
      		 
      <div style="height: 100%; overflow: auto;">我是内容</div>
<div style="position: fixed">我是fixed</div>

    2. 方案二：
      demo.html 
      1
      2
      3
      		 
      <div style="height: 100%; position:relative;">
    <div style="bottom:0; position:absolute;"></div>
</div>

12.animation动画结束后如何保持最后的动画状态

demo.css 
1
2
3
4
5
6
7
8
9
10
11
 
.demo{
    animation-fill-mode:forwards;
}

/*animation-fill-mode : none | forwards | backwards | both;

值                 描述
none               不改变默认行为。
forwards           当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。
backwards          在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。
both               向前和向后填充模式都被应用。*/