Front-end piecemeal knowledge collection

1, text-align: center ie7-8 is not compatible

2, box-sizing ie8 or above is only supported

3. Background image compatibility solution: write each attribute separately

4, border-radius is only supported by ie9

5. 1px border pseudo-class calculation on the mobile side: 1/0.33 (0.33 is the zoom ratio); whether it is four sides or one side, the height must be set to 1px, not 0px, otherwise the lines will be blurred.

6. Standard size of icon rounded corners: image width*0.61*.0.61*0.61

7. Adjust the size of the textarea:

resize:{

none (not allowed)

both (allows to adjust horizontal, vertical)

vertical (only allows vertical adjustment)

horizontal (only horizontal adjustment is allowed)

}

8, the radio radio button is grey on ios phones but blue on android phones

9. The text entered in the input box is on the top of the ios mobile phone and is not vertically centered; it is vertically centered on the android mobile phone

10. You can use max-width and max-width to adjust the aspect ratio of the image

11. The value of textarea is normal in ie browser with text(), but there is a problem with firefox and chrome browser, so it is best to use val() for the value

12. Add QQ login interface to the website to save the trouble of registration:

<meta property='qc:admins' content='1257...'>

13, svg is suitable for making polyline animation, but it is not supported above android5.0

14. Setting bottom: 0 for div can make the height change from bottom to top when adding animation to change the height of div; on the contrary, top: 0 can make the height change from top to bottom (for specific cases, please refer to the safety propaganda)

15, <hr/> tag setting style: '1psx solid red' can turn solid lines into dashed lines.

16, css3 blur (blur) to solve the compatibility problem of ie6-9:

filter:progid:DXImageTransform.Microsoft.Blur(Pixel Radius=5(blurred pixels), MakeShadow=false).

17. Both Divs have fixed width and height, one is located in the normal document flow (that is, no style is added except the width and height), and the other is added with position:absolute, the final effect is that the two are vertically arranged in the middle of the left side of the screen; If you add absolute positioning to another div (and vice versa), the result is that the positioned div is still in its original position, and the other one disappears.

18,

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326484557&siteId=291194637