Glittering's blog
mamingjuan
2017-06-15
目录

工作中遇到的css问题记录

# 静态页面常见问题汇总

# 显示省略号(…)

css实现单行、多行文本溢出显示省略号(…) 一、 单行文本溢出显示省略号(…)

省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。

p{
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 // 一定要设置width
 // 但是这个属性并不支持多行文本溢出显示省略号。
1
2
3
4
5
6
7

二、 多行文本溢出显示省略号(…)

在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。

text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。

这个属性只合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器

p{
display: -webkit-box; // 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient; // 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis; // 可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
1
2
3
4
5
6
7
8
9
10

垮浏览器兼容的方案 比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；

p {
    position:relative;
    line-height:1.4em;
    /* 3 times the line-height to show 3 lines */
    height:4.2em;
    overflow:hidden;
}
p::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 20px 1px 45px;

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

另外一种方法

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
1
2
3
4
5
6
7

# img遇到问题

canvas生成图片的时候，需要跨域引用图片，这时会出现跨域图片无法被生成新图片的问题。解决方案是，给跨域的图片加一个crossorigin="anonymous"

图片水平居中显示：object-fit: cover解决

display:inline-block有隐藏文字的时候，在android没有问题，但是ios有问题,因为有隐藏显示功能。此时的自动收起后依旧dom有高度。设置-webkit-box

    display: -webkit-box;
    font-size: .373333rem;
    color: #031a1f;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    line-height: .533333rem;
}
1
2
3
4
5
6
7
8
9
10

如果页面中有很多图片放到一起的时候，做一些宣传活动时

margin:0;
padding:0;
fontsize:0;
/* 全设置了，但还是有一个间隙 */
1
2
3
4

实际上是inline元素搞的鬼

任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。 —-《CSS权威指南》

意思就是，其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙，也就是我们上文出现的问题了。解决方式可以通过vertical-align: top或者img{display: block;}或者font-size: 0解决。

top line
middle line
base line
bottom line
1
2
3
4
  • 行高：两行文字“基线”之间的垂直距离
  • 行距：一行“底线”至下一行的“顶线”的垂直距离
  • 半行间距：“底线”至“行内框”垂直距离
  • 半行间距：（行高-字体大小）/2
  • 本例：·30px= (160px-100px)/2·

vertical-align 的默认属性就是 baseline ，我们只要设置了跟 baseline 不一样的属性，都可以避免这个问题。

baseline 默认。元素放置在父元素的基线上。
sub 垂直对齐文本的下标。
super 垂直对齐文本的上标
top 把元素的顶端与行中最高元素的顶端对齐
text-top 把元素的顶端与父元素字体的顶端对齐
middle 把此元素放置在父元素的中部。
bottom 把元素的顶端与行中最低的元素的顶端对齐。
text-bottom 把元素的底端与父元素字体的底端对齐。
length
% 使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit 规定应该从父元素继承 vertical-align 属性的值。

除了可以修改display：block以后还可以设置浮动来解决

<style type="text/css">
    img{
        height: 200px;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid red;

        float: left;
    }
    ul li {
        overflow: hidden;
    }
    ul{
        border: 1px solid blue;
        list-style: none;
        padding: 0;
        margin: 0;
    }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# css字体渐变色

这次的重点就在于两个属性， background 属性 mask 属性 这两个属性分别是两种实现方式的关键。

# 方式一

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <style>

    span {
        background: linear-gradient(to right, red, blue);
        -webkit-background-clip: text;
        color: transparent;
    }
    </style>
</head>

<body>
        <span>前端简单说</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

[注] 在chrome 中试background-clip一定要带上-webkit-

代码不多，我们来看看，
background: linear-gradient(to right, red, blue); 这行是给背景设置为渐变色，这里注意一点，这样是简写了，其实是给background-image 设置为渐变色，不是 background-color，是背景图 取值为渐变色，如果不知道渐变色，直接到这里看，

下面讲解下background-clip: background-clip 属性 规定背景的绘制区域

属性：

border-box:背景被裁剪到边框盒
padding-box:背景被裁剪到内边距框
content-box:背景被裁剪到内容框
1
2
3

兼容性问题，目前还不是能所有浏览器都支持。

取值为text的意思，就是以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

所以，我们最后写color: transparent; 让文字为透明色，就是让后面背景色显示出来。

# 方式二

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<style type="text/css">
    h1{
        position: relative;
        color: yellow;
    }
    h1:before{
        content: attr(text);
        position: absolute;
        z-index: 10;
        color:pink;
        -webkit-mask:linear-gradient(to left, red, transparent );
    }
</style>
</head>

<body>
    <h1 text="前端简单说">前端简单说</h1>
</body>

</html>
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

代码简单说一下:

:before 选择器向选定的元素 前 插入内容。
使用content 属性来指定要插入的内容。
content取值 attr 就是用来获取属性值的，content:attr(属性名);

content: attr(text); 能获取到元素的 text 属性，这里的这个text属性是自己自定义的一个属性，你也可以在元素中加一个 tt 属性，像这样
<h1 tt="前端简单说">前端简单说</h1>
然后content属性 这样写，content: attr(tt); 同样是可以起作用的。

[注] mask的用法需要学习一下

学习mask地址 (opens new window)

简单说中的 mask - 好好利用mask-image (opens new window)

文章借鉴自：前端简单说 (opens new window)

# pc端常见问题

  1. 如果图片加a标签在IE9-中会有边框

解决方案:

img{border:none;}
1
  1. rgba不支持IE8

解决方案:可以用 opacity

opacity:0.7;/*FF chrome safari opera*/
filter:alpha(opacity:70);/*用了ie滤镜,可以兼容ie*/
1
2

但是,需要注意的是,opacity会影响里面元素的透明度

  1. display:inline-block ie6/7不支持
display:inline-block;
*display:inline;
1
2
  1. 默认的body没有body去掉margin情况下ie5、6、7边缘会很宽margin-top加倍 如果处于无声明状态那么所有的ie浏览器margin-top加倍

解决方案:用css给body添加magin属性为0px

body{margin:0;}
1
  1. IE 6.0 Firefox Opera等是 真实宽度=width+padding+border

IE5.X 真实宽度=width

解决方案:

方法1.

div.content { 
　　width:400px;  //这个是错误的width(对于ie5来说是正确的），所有浏览器都读到了 
　　voice-family: "\"}\"";  //IE5.X/win忽略了"\"}\""后的内容 
　　voice-family:inherit; 
　　width:300px;  //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的 
}　
1
2
3
4
5
6

方法2.

div.content { 
　　width:300px !important;  //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 
　　width(空格)/**/:400px;  //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 
}
1
2
3
4
  1. height不能小于16px,设置较小高度标签（一般小于10px），在IE6，IE7，遨游中高度超出自己设置高度

解决方案:overflow设置为hidden

  1. min-height不兼容 ie6 7解释为超过高度就撑开，而其他版本浏览器则遮盖下面的层

解决方案:

min-height:200px; height:auto !important; height:200px; overflow:visible;
1
  1. position:fixed IE5、6无法识别此属性

解决方案:

<!--[if lte IE 6]>
　　　<style type="text/css">
　　　　　 html {
　　　　　　　　/*这个可以让IE6下滚动时无抖动*/
　　　　　　　　background: url(about:black) no-repeat fixed
　　　　　　}
　　　　　　#demo_t, #demo_b, #demo_l, #demo_r {
　　　　　　　　position: absolute;
　　　　　　}
　　　　　　#demo_t, #demo_b {
　　　　　　　　/*这个解决body有padding时，IE6下100%不能铺满的问题*/
　　　　　　　　width: expression(offsetParent.clientWidth);
　　　　　　}
　　　　　　/*下面三组规则用于IE6下top计算*/
　　　　　　#demo_l, #demo_r {
　　　　　　　　top: expression(offsetParent.scrollTop + 300);
　　　　　　}
　　　　　　#demo_t {
　　　　　　　　top: expression(offsetParent.scrollTop);
　　　　　　}
　　　　　　#demo_b {
　　　　　　　　top: expression(offsetParent.scrollTop + offsetParent.clientHeight-offsetHeight);
　　　　　　}
　　</style>
<![endif]-->
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
  1. 浮动的div有margin_left属性ie6会加倍 无论兼容视图还是无声明视图

解决方案:

方案一: IE6唯一识别属性_的方式加_display属性_display:inline;

方案二:

条件注释

<!--[if lte IE 6]>
<style>
　　.on{ display:inline }
</style>
<![endif]-->
1
2
3
4
5
  1. cursor兼容 自定义指针cur格式的图片url路径问题无论是兼容还是无声明版本

解决方案:

cursor:url(Hand.cur), url(/Hand.cur), auto;
1
  1. png图片 IE6里面的png图片不能透明 兼容版本和无声明版本都是

解决方案:

<!--[if IE ]>
　　　<style type="text/css">
　　　　　#DIVname{
　　　　　　　　background:none;
　　　　　　　　filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="pngtouming.png"
　　　　　}
　　　</style>
<![endif]-->
1
2
3
4
5
6
7
8
  1. img浮动 img标签打回车会造成每个图片之间有缝隙

解决方案:可以删除之间的回车键

  1. 在IE浏览器下 input type="text"文本框点击时后面会出现"X",以及type="password"后面会出现眼睛,如何除去这两种默认样式:
::-ms-clear,::-ms-reveal{display:none;}
1

注:IE9-不识别

  1. CSS3前缀 -webkit- webkit渲染引擎 chrome/safari

-moz- gecko渲染引擎 firefox

-ms- trident渲染引擎 IE

-o- 　opeck渲染引擎　opera

动画、过渡、background-size 都需要加前缀

eg: 动画

@-webkit-keyframes name{
　　　　0%{动画开始的css样式;}
　　　　100%{动画结束的css样式;}
　}

-webkit-animation:name 8s infinite linear;
1
2
3
4
5
6

过渡:

div.box{
　　　　bottom:-40px;　  　
      -webkit-transition:all .3s ease-in-out 0s;
}
1
2
3
4

注:但是过渡不兼容IE8-,可以用JS动画实现

background-size 同样也不支持IE8,可以考虑用img

  1. 渐变

解决方案:

filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#35FEA1,endColorStr=#6E9DFF); /*IE 6 7 8*/
    background: -ms-linear-gradient(top, #35FEA1,  #6E9DFF);/* IE 10 */
    background:-moz-linear-gradient(top, #35FEA1,  #6E9DFF); /*火狐*/
    background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/*谷歌*/
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#35FEA1), to(#6E9DFF));/* Safari 4-5, Chrome 1-9*/
    background: -webkit-linear-gradient(top, #35FEA1,  #6E9DFF);/*Safari5.1 Chrome 10+*/
    background: -o-linear-gradient(top, #35FEA1,  #6E9DFF);/*Opera 11.10+*/
1
2
3
4
5
6
7
  1. PIE.htc 可以实现很多css3属性在IE下的兼容性 如:圆角、阴影、渐变

(1) 圆角 border-radius

.signBtn{
    height: 40px;
    background-color:#08BCD2;
    color: #fff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    behavior: url(css/PIE.htc);
}
1
2
3
4
5
6
7
8
9

(2)阴影 box-shadow

.box{
　　width:200px;
　　height:200px;
　　-webkit-box-shadow:1px 0 10px;
　　-moz-box-shadow:1px 0 10px;
　　box-shadow: 1px 0 10px;
　　background-color: #fff;
　　behavior: url(css/PIE.htc);/*IE边框阴影*/
}
1
2
3
4
5
6
7
8
9

(3)背景透明rgba

.box{
　　 background-color:rgba(12, 154, 171, 0.29);
    behavior: url(css/PIE.htc);
    -pie-background:rgba(12, 154, 171, 0.29);
}
1
2
3
4
5

(4)渐变

.box{
   width:200px;
   height:400px;
   background:-webkit-gradient(linear, 0 0, 0 bottom, from(#9F9), to(#393));
   background:-moz-linear-gradient(#9F9, #393);
   -pie-background:linear-gradient(#9F9, #393);
   behavior:url(pie.htc);                
}
1
2
3
4
5
6
7
8

注:PIE.htc文件路径相对是相对于css文件,并非html文件,以上例子是将PIE.htc文件放在与css样式文件同一个文件夹css内,而对应的html问价与css文件夹同级

  1. JS实现点击跳转到指定位置
$(".arraw-bt").click(function(){
    var scroll_offset = $("#section").offset();
     console.log(scroll_offset);
     $("body,html").animate({//如果只写body,只被chrome支持 只被chrome支持 Firefox和ie不支持
     "scrollTop":scroll_offset.top
     },0);//此处0写上会一下跳转到指定位置,若不写会有过渡效果
1
2
3
4
5
6
  1. ie浏览器input输入框的默认清空和密码明文按钮

参考来源 (opens new window)

/*清除text文本输入框的清除图标*/
input::-ms-clear{
      display: none;
}
/*清除password密码输入框的明文图标*/
input::-ms-reveal{
      display: none;
}
1
2
3
4
5
6
7
8
  1. input中光标颜色修改
caret-color: #8d9799;
1
  1. input中的光标在某些浏览器上过大 通过设置padding值，让input内容区域变小
上次更新: 2025/04/07, 01:42:58
web异常监控和分析
axios 与 promise

← axios 与 promise→

Copyright © 2015-2025 Glitz Ma