Front-end css compatibility and obfuscation, css compatibility
1. Common gray-level clear float
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; overflow: hidden;}
Interpretation of floating close best solution: clearfix
2. Unique keywords with slash/segmentation
H2{ font:12px/100% sans-serif;}
The font size and row height are separated respectively. The other key is to use a blank space.
3. There is a gap between inline element connections
Cause: inline elements are treated as fonts, and there is an interval between fonts.
Solution:
1. Write Multiple labels in one line
2. The location of the tag to be closed overlaps with that of the start tag.
3. Use comments to connect to the beginning and end
4. Write: font-size: 0 on the parent level;
5. Use display: block (img is an inline element)
6. Use the letter-spacing attribute
How to handle the gap between multiple Img labels
Iv. Layout
Note that the relative or static positioning of the parent element determines its internal absolute positioning and floating element.
5. When block-level elements wrap inline elements, there will always be several pixel differences
<! -- Example 1 --> <div> </div> <! -- Example 2 --> <ul> <li> </li> </ul> <! -- Example 3 --> <div> <span> asdasdasd </span> </div>
Solution: Set the inline element attribute: display: block;
..Css hack (hack is risky and should be used with caution)
1. html hack
<!--[if lt IE 7 ]>
Use in css:
.ie6 body{ background-color:red;}
2. selector hack
* html .test{color:#090;} /* For IE6 */* + html .test{color:#ff0;} /* For IE7 */
3. Attribute hack
Color: # fff \ 0;/*: Select IE8 + and Opera */color: #090 \ 9;/* For IE browser */* color: # f00; /* For IE7 */_ color: # ff0;/* For IE6 */
VII. box-sizing
1. Conventional box model: box-sizing: content-box (width = content does not include padiing border)
2. box-sizing: border-box width = content + padiing + border (equivalent to the weird mode of low-level browsers)
8. Differences in image formats
Differences in format
Jpg lossy compression
Png lossless compression and transparent image
Gif dynamic images
Webp supports lossy compression and lossless compression of image files, with extremely high compression ratio and rich images (browser compatibility problems)
IX. Differences between px, em, and rem
Em, rem relative size
Em relative parent element font-size
Rem's font-size relative to the html root element
Px absolute size
10. attributes that cannot be inherited
Most border attributes, such as border, padding, and background.
11. Weight of selector in CSS
Decrease in sequence: id> class> label
12.css color problems
Try to use a hexadecimal color, similar to # fff. A hexadecimal color in one digit is a definite color value.
The color values such as red may be affected by the user agent, namely, user agent stylesheet.
13. ie6.7 does not support box-sizing: border-box;
Solution: Use https://github.com/schepp/box-sizing-polyfill.
Note: * behavior: url (../resource/js/lab/boxsizing. htc); this URL is relative to the HTML page !!
14. IE6.7 font and font-family
Font works, but does not.
Solution: You must set font-family: "microsoft yahei"
15. text-align text-indent vertical-align
1. text-align: Act on block-level elements
Text-align cannot be used to center img because img is not a block element. You only need to set a div on the outside of img.
<div style="text-align:center"> </div>
2. text-indent: Act on block-level elements
3. vertical-align: adjusts the baseline-based position of the element in the row.
16. The border layout of the li line under the li in ul
If there is a bug in earlier IE versions, there will be more li width and height.
Use the border of li for the interval line.
17. ie8 and the following browsers do not support: befor.: after
When using a jquery Library: jquery. pseudo. js is compatible with earlier browsers
Note: Do not use a JQuery version that is too high. An error is reported! (I use 1.10)
18. IE6 does not support position: fixed
.leftTop{ position:absolute; left:expression(eval(document.documentElement.scrollLeft)); top:expression(eval(document.documentElement.scrollTop));}
Position: fixed; flashing
Solution: * html {background-image: url (about: blank); background-attachment: fixed;
19. IE6 double margin, padding margin Problem
Once the elements are floating, the bug will be doubled.
Solution: display: inline
20. When the width and height of 10 PX are set in IE6, a rectangle appears.
Another situation of this phenomenon is that IE6 defines a relatively small height issue.
Cause: IE6 has the default Row Height
Solution: Use font-size: 0; line-height: 0;
21. IE6 could not recognize the pseudo object: first-letter/: first-line
p:first-letter {}
Solution; add a space between first-letter and "{"
22. Ignore in IE6! Important
div{color:#f00!important;color:#000;}
Solution: Separate write and! Important attributes are in front
div{color:#f00!important;}div{color:#000;}
Occasionally updated...