Front-end css compatibility and obfuscation, css compatibility

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