Summary of frequently asked questions about static pages

Show ellipsis (…)

css implements single-line and multi-line text overflow display ellipsis (…) 1. Single-line text overflow displays ellipses (…)

Ellipses can use text-overflow:ellipsis in IE, but many browsers require a fixed width. At the same time, these browsers do not support the text-overflow:ellipsis setting. Here is a tutorial on displaying ellipses compatible with each browser.Everyone should know that the text-overflow:ellipsis attribute is used to realize the overflow display of ellipsis (...) in a single line of text.Of course, some browsers also need to add the width attribute.

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

2. Multi-line text overflows and displays ellipses (…)

Page implementation in WebKit browsers or mobile terminals (most browsers with WebKit core) is relatively simple. You can directly use WebKit's CSS extension attribute (WebKit is a private attribute) - webkit-line-clamp; note: This is an unsupported WebKit property, which does not appear in the CSS specification draft.

-webkit-line-clamp is used to limit the number of lines of text displayed in a block element.In order to achieve this effect, it needs to be combined with other WebKit properties.Common combination attributes:

display: -webkit-box; must be combined to display the object as a flexible box model.

-webkit-box-orient must be combined with the attribute to set or retrieve the arrangement of the child elements of the flex box object.

text-overflow: ellipsis; can be used to hide out-of-range text with ellipsis "..." in the case of multi-line text.

This attribute is only suitable for WebKit browsers or mobile browsers (mostly WebKit-based browsers)

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;
}

Browser-compatible solutions A more reliable and simple method is to set the height of the relatively positioned container and simulate it with elements containing ellipses (…);

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;

}

Another way

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%);
}

img encountered a problem

When canvas generates images, it is necessary to reference images across domains. At this time, there will be a problem that cross-domain images cannot be generated into new images.The solution is to add crossorigin="anonymous" to cross-domain images

The picture is displayed horizontally and centered: object-fit: cover is solved

When display:inline-block has hidden text, there is no problem on Android, but there is a problem on iOS because of the hidden display function.At this time, the dom still has a height after being automatically folded.settings-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;
}

If there are many pictures on the page put together, when doing some promotional activities

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

In fact, it’s the inline element that’s causing the problem.

Any visible element that is not a block-level element is an inline element, and its performance characteristics are in the form of "row layout". —-"The Definitive Guide to CSS"

What this means is that inline elements such as pictures and text are aligned with the baseline of their parent by default. However, what you align is the baseline, and what expands the height is the overall height of the element (bottom line). This will definitely cause a certain gap, which is the problem we had above.The solution can be solved by vertical-align: top or img{display: block;} or font-size: 0.

top line
middle line
base line
bottom line

• Line height: The vertical distance between the "baseline" of two lines of text
• Leading: The vertical distance from the "bottom line" of one line to the "top line" of the next line
• Half line spacing: vertical distance from "bottom line" to "inline box"
• Half line spacing: (line height - font size)/2
• This example: ·30px= (160px-100px)/2·

The default attribute of vertical-align is baseline. As long as we set an attribute different from baseline, we can avoid this problem.

baseline default.The element is placed on the parent element's baseline.
sub subscript for vertically aligned text.
super vertically aligns the text's superscript
top aligns the top of the element with the top of the tallest element in the row
text-top aligns the top of the element with the top of the parent element's font
middle places this element in the middle of the parent element.
bottom Aligns the top of the element with the top of the lowest element in the row.
text-bottom aligns the bottom of the element with the bottom of the parent element's font.
length
% Arrange this element using the percentage value of the "line-height" attribute.Negative values ​​are allowed.
inherit specifies that the value of the vertical-align attribute should be inherited from the parent element.

In addition to modifying the display: block, you can also set float to solve the problem.

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

css font gradient color

The focus this time is on two attributes, background property mask attribute These two properties are the key to the two implementation methods respectively.

Method one

<!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>

[Note] When trying background-clip in chrome, you must bring -webkit-

There is not much code, let’s take a look,
background: linear-gradient(to right, red, blue); This line sets the background to a gradient color. Please note that this is an abbreviation. In fact, it sets the background-image to a gradient color. No. background-color , is the background image. The value is the gradient color. If you don’t know the gradient color, go here to see it.

Let’s explain below background-clip : background-clip attribute specifies the drawing area of the background

Properties:

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

Due to compatibility issues, not all browsers currently support it.

The value of text means that the text in the block is used as the cropping area to be cropped outward. The background of the text is the background of the block, and the area outside the text will be cropped.

Therefore, we finally write color: transparent; to make the text transparent, which means that the background color behind it will be displayed.

Method 2

<!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>

Let’s briefly talk about the code:

The :before selector inserts content before the selected element.
Use the content attribute to specify the content to be inserted.
The content value attr is used to obtain the attribute value, content:attr (attribute name);

content: attr(text); can get the text attribute of the element. The text attribute here is a custom attribute. You can also add a tt attribute to the element, like this
<h1 tt="前端简单说">前端简单说</h1>
Then write the content attribute like this, content: attr(tt); will also work.

[Note] You need to learn how to use mask

Learn mask address

Mask in a nutshell - make good use of mask-image

The article is borrowed from: A brief introduction to the front end

Frequently Asked Questions on PC

1. If the image is tagged with a, there will be a border in IE9-

Solution:

img{border:none;}

2. rgba does not support IE8

Solution: You can use opacity

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

However, it should be noted that opacity will affect the transparency of the elements inside

3. display:inline-block is not supported by ie6/7

display:inline-block;
*display:inline;

4. The default body does not have a body and the margin is removed. In IE5, 6, and 7, the margin will be very wide. The margin-top will be doubled. If it is in an undeclared state, the margin-top will be doubled in all IE browsers.

Solution: Use css to add the magin attribute to the body as 0px

body{margin:0;}

5. IE 6.0 Firefox Opera, etc. are real width=width+padding+border

IE5.X real width=width

Solution:

Method 1.

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

Method 2.

div.content { 
　　width:300px !important;  //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值 
　　width(空格)/**/:400px;  //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用 
}

6. The height cannot be less than 16px. Set a smaller height label (usually less than 10px). In IE6, IE7, the height exceeds the height you set when traveling.

Solution: set overflow to hidden

7. min-height is not compatible. IE6 7 interprets it as stretching when it exceeds the height, while other versions of browsers cover the lower layer.

Solution:

min-height:200px; height:auto !important; height:200px; overflow:visible;

8. position:fixed IE5 and 6 cannot recognize this attribute

Solution:

<!--[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]-->

9. The margin_left attribute of a floating div will be doubled in IE6, regardless of the compatible view or the undeclared view.

Solution:

Solution 1: IE6 uniquely identifies the _ attribute by adding the _display attribute: _display:inline;

Option two:

Conditional comments

<!--[if lte IE 6]>
<style>
　　.on{ display:inline }
</style>
<![endif]-->

10. cursor compatibility custom pointer cur format image url path problem whether it is compatible or undeclared version

Solution:

cursor:url(Hand.cur), url(/Hand.cur), auto;

11. png pictures The png pictures in IE6 cannot be transparent. Both the compatible version and the undeclared version are

Solution:

<!--[if IE ]>
　　　<style type="text/css">
　　　　　#DIVname{
　　　　　　　　background:none;
　　　　　　　　filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="pngtouming.png"
　　　　　}
　　　</style>
<![endif]-->

12. img floating img tag hitting enter will cause gaps between each image

Solution: You can delete the Enter key between

13. In the IE browser, when the input type="text" text box is clicked, an "X" will appear behind it, and an eye will appear behind type="password". How to remove these two default styles:

::-ms-clear,::-ms-reveal{display:none;}

Note: IE9-does not recognize

14. CSS3 prefix -webkit- webkit rendering engine chrome/safari

-moz- gecko rendering engine firefox

-ms- trident rendering engine IE

-o- opeck rendering engine opera

Animation, transition, and background-size all need to be prefixed

eg: animation

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

-webkit-animation:name 8s infinite linear;

Transition:

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

Note: However, the transition is not compatible with IE8- and can be implemented with JS animation.

background-size also does not support IE8, you can consider using img

15. Gradient

Solution:

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+*/

16. PIE.htc can realize the compatibility of many css3 attributes under IE, such as: rounded corners, shadows, gradients

(1) rounded corner 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);
}

(2)Shadow 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边框阴影*/
}

(3)Background transparent rgba

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

(4) Gradient

.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);                
}

Note: The path of the PIE.htc file is relative to the css file, not the html file. The above example is to place the PIE.htc file in the same folder css as the css style file, and the corresponding html query is at the same level as the css folder.

17. JS realizes clicking to jump to the specified location

$(".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写上会一下跳转到指定位置,若不写会有过渡效果

18. The default clear and password clear text buttons of the IE browser input box

Reference source

/*清除text文本输入框的清除图标*/
input::-ms-clear{
      display: none;
}
/*清除password密码输入框的明文图标*/
input::-ms-reveal{
      display: none;
}

19. Modify the cursor color in input

caret-color: #8d9799;

20. Cursor in input is too large on some browsers Make the input content area smaller by setting the padding value