CSS compatibility and css compatibility

CSS compatibility and css compatibility

1. Compatibility of the smallest chorme font.

Problem description: ff and IE fonts can be set to 1px, but chorme Chinese fonts are 12px, and all fonts smaller than 12px are displayed as 12px.
Solution: chorme supports CSS3 and is available
Font-size: 12px;
-Webkit-transform: scale (0.84, 0.84 );
* Font-size: 10px;
But it will find that the entire container has been reduced and become non-aligned, and can be solved with margin.

2. When an image is displayed in IE8 and below, an extra border is displayed, but not in Chrome or Firefox.
Problem description: The display effect is Chrome, FireFox, and IE10, but IE8 has an extra blue border (sometimes black ).
Solution: You need to specify the img border style: img {border-style: none ;}

3. inexplicable white space problems in img Images
Problem description: the gap at the bottom of the image actually involves the layout model of the line elements. The default vertical alignment of the image is the baseline, and the position of the baseline is related to the font. In some cases, the gap at the bottom of the image may be 2px, but sometimes 4px or more. Different font-size should also affect the size of the gap.
Solution: Set display: block or vertical-align: top or bottom for img.

3. IE8 transparent and compatible writing:
Problem description: opacity = is the CSS3 attribute, which is not supported by ie8.
Solution: opacity: 0.7;
Filter: alpha (opacity = 70);/* compatible with ie */

4. display: inline-block not recognized in IE6 and 7
The solution is as follows:
Let the standard browser recognize display: inline-block;
Let ie6/7 recognize the display: inline; to overwrite the display: inline-block above, and then use zoom: 1; to trigger haslayout to make the inline element behave the same as the inline-block element in ie.
. List1 li {display: inline-block; width: 150px; * zoom: 1; * display: inline ;}
Add * zoom: 1; (triggers haslayout in ie6 and ie7 );
* Display: inline (only recognized by ie6 and ie7 );
Note: It must be added after display: inline-block.

5. IE6 bilateral margin bug.
Problem description: in ie6, the actual effect of defining margin-left or margin-right for a floating container is twice that of a value.
Solution: Define display: inline for floating containers.

6. There is a gap between the two layers in IE6
Condition: When a non-floating element adjacent to a floating element does not specify a specific height or width, the content of the non-floating element and the boundary of the floating element generate a 3px gap. This gap is only displayed along non-floating elements. If a non-floating element specifies a specific width or height, the non-floating element and the floating element have a 3px gap.
Solution: Set margin-right:-3px for the first floating element;

7. In IE6, when multiple floating elements are mixed with HTML annotation statements, if the floating element width is 100%, the next line will display the last character of the previous line.
Solution: Add display: inline; to all floating elements ;.

8. IE6 cannot define a container with a height of around 1 px
In IE6, this problem is caused by the default Row Height.
Solution: overflow: hidden; or zoom: 0.08;

9. The hover status of the a link does not work.
Problem description: a: hover img {width: 300px} when we want the mouse to hover, the image width contained in the link changes. This style ie6 is not recognized, in ie7 and ff.

10. a link does not work
Problem description: a links embedded button or input type = "button" button, ie8 and below click no response ff chorme normal
Solution: Add onclick = "javascript: location. href = '***. html'" to the button '". In this way, the link is meaningless.

11. block-based a link does not work
Problem description: block-based a link, which is nested in the absolute layer. img is placed in the absolute layer. Clicking img under ie7 won't have any effect on the link. ff chorme is normal.

12. overflow: hidden's absolute layer position: absolute is invalid. absolute is out of the Document Stream.
Solution: Add position: relative or position: absolute to overflow: hidden.

13. Set the color of the scroll bar in IE, which is invalid in FF chorme.
Html {
Scrollbar-face-color: red;
Scrollbar-highlight-color: # fff;
Scrollbar-shadow-color: blue;
Scrollbar-3dlight-color: blue;
Scrollbar-arrow-color: green;
Scrollbar-track-color: # fff;
Scrollbar-darkshadow-color: red;
}

14. Several Methods to clear floating:
1. Add an empty element and set clear: both; disadvantage: This method adds a meaningless flag.
2. The parent element is also floating. Disadvantage: elements at the same level as the parent element are affected.
3. Set overflow: hidden for the parent element; disadvantage: this will automatically clear any floating elements contained:
4. Use in combination: Add new content at the end of the specified existing content by the after pseudo class and content declaration:
Add the clear class to the parent Element
. Clear: after {
Content :".";
Height: 0;
Visibility: hidden;
Display: block;
Clear: both;
}
Disadvantage: it does not work in IE6/7 or earlier versions.
Solution:
. Clear {
Zoom: 1;
}

15. ff does not recognize background-position-y or background-position-x;
Solution: background-position: x y; both are written;

5 // in Ie6, the maximum width and the minimum width are not recognized, that is, min-width/height and Max-width/height.
Solution:
(1):. abc {border: 1px blue solid; width: 200px; height: 200px ;}
Html> body. abc {width: auto; height: auto; min-width: 200px; min-height: 200px ;}
(2):. abc {width: 200px; height: 200px; _ width: 200px; _ height: 200px ;}
(Because ie6 has a feature, when defining a height, if the content exceeds the height, the element automatically adjusts the height .)

15 // ie6 does not support fixed

/* For non-IE6, you can write like this */
# Top {
Position: fixed;
Bottom: 0;
Right: 20px;
}

/* However, IE6 does not support fixed locating and needs to be rewritten */
# Top {
Position: fixed;
_ Position: absolute;
Top: 0;
Right: 20px;
_ Bottom: auto;
_ Top: expression(eval(document.doc umentElement. scrollTop ));
}

/* Use hack to enable IE6 to achieve this effect, but this stuff will flash and the following code is required */
* Html {
Background-image: url (about: blank );
Background-attachment: fixed;
}

/* Fix it to the top */
# Top {
_ Position: absolute;
_ Bottom: auto;
_ Top: expression(eval(document.doc umentElement. scrollTop ));
}

/* Fixed at the bottom */
# Top {
_ Position: absolute;
_ Bottom: auto;
_ Top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. clientHeight-this.offsetHeight-(parseInt (this. currentStyle. marginTop) | 0)-(parseInt (this. currentStyle. marginBottom) | 0 )));
}
/* Vertical center */
# Top {
Position: fixed;
Top: 50%;
Margin-top:-50px;
_ Position: absolute;
_ Top: expression(eval(document.documentElement.scrollTop+document.doc umentElement. clientHeight/2 ));
}

17 // the bug that z-index does not work in ie6

1) First, let's talk about the first kind of z-index, which does not work no matter how high it is set. There are two conditions for this situation:
1. The parent tag position attribute is relative; 2. the problem tag contains the float attribute.
2) all browsers: when the position attribute of the parent tag is relative or absolute, the absolute attribute of the Child tag is relative to the parent tag. In IE6, the hierarchy is sometimes not how high the z-index of the sub-tag is, but the z-index of their parent tag is high or low.

11. // The height is not adaptive.
Height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses margin or paddign. Example: # box {background-color: # eee;} # box p {margin-top: 20px; margin-bottom: 20px; text-align: center ;} <div id = "box"> <p> content in the p object </p> </div>
Solution: Add two empty div objects to the upper and lower sides of the P object. CSS code:. 1 {height: 0px; overflow: hidden;} or add the border attribute to the DIV.

11. // Why can't the FF text support containers? Containers with fixed height values in the standard browser are not supported as in IE6, so I want to fix the height, how can I set it to be supported? The method is to remove the min-height: 200px setting for height. Here, we can define {height: auto to take care of IE6 that does not know min-height! Important; height: 200px; min-height: 200px ;}

CSS hack
Css hack is a technique that is compatible with css correctly displayed in different browsers.
Hack of IE versions

* IE8/9 and ff cannot be recognized by IE6 and IE7.
_ Only recognized by IE6
* + Can only be identified by IE7/* IE67 in the test */
\ 0 can be identified by IE8, 9, and 10
\ 9 can only be identified by IE6, 7, 8, 9, and 10
\ 9 \ 0 can be identified by IE8, 9, and 10

. Header {_ width: 100px;}/* dedicated for IE6 */
. Header {* + width: 100px;}/* dedicated for IE7 */
. Header {* width: 100px;}/* IE6, IE7 shared */
. Header {width: 100px \ 0;}/* IE8, IE9 shared */
. Header {width: 100px \ 9;}/* IE6/7/8/9 shared */
. Header {width: 330px \ 9 \ 0;}/* dedicated for IE9 */

/* Selector Hack :*/
* Html. header {}/* IE6 */
* + Html. header {}/* IE7 */

1 ,! Important
IE789/firefox can recognize! Important. The second sentence is not executed after this statement is viewed.
IE6 will be skipped! The important statement (not recognized) executes the second sentence directly.
This is a misunderstanding
Please note that IE6 is not recognized in some cases.
Example: div {background: red! Important} div {background: green}. In this case, all browsers interpret the background color as red.

3. // condition comments dedicated to IE
<! -- Other browsers -->
<Link rel = "stylesheet" type = "text/css" href = "css.css"/>
<! -- [If IE 7]>
<! -- Suitable for IE7 -->
<Link rel = "stylesheet" type = "text/css" href = "ie7.css"/>
<! [Endif] -->
<! -- [If lte IE 6]>
<! -- Suitable for IE6 and later -->
<Link rel = "stylesheet" type = "text/css" href = "ie.css"/>
<! [Endif] -->

Hack of Firefox and Chrome
Firefox: @-moz-document url-prefix ()/* When writing the outer part of the selector (only available here): Firefox only */
Chorme: @ media screen and (-webkit-min-device-pixel-ratio: 0)/* When writing the outer layer of the selector (this can only be written here): Chrome only */

Before/after pseudo-class IE67 not recognized
. Example: before,. example before {}
. Example: after,. example after {}
One has a colon, and the other is separated by spaces. The former IE8 + and other modern browsers; the latter for the IE6-7.

 

Further Supplement and Improvement