Common browser compatibility problems and solutions in Css

I. Translucent webpage background

Translucent webpage background

The code is as follows:

Copy code

Opacity: 0.8; Filter: "progid: DXImageTransform. Microsoft. Alpha (opacity = 80)"; in IE6, the CSS method solves the problem of translucent PNG images: # DIVname { Width: 300px; Height: 99px; Background: url ('images/top.png ') no-repeat top; * Background: none; * Filter: progid: DXImageTransform. Microsoft. AlphaImageLoader (enabled = 'true', sizingMethod = 'corp ', src = 'template/flower/images/top.png '); }

II. Clear floating

The code is as follows:	Copy code
. Clearfix: after {content: "."; display: block; height: 0; clear: both; visibility: hidden} . Clearfix {display: inline-block} . Clear {height: 0; line-height: 0; font-size: 0; overflow: hidden; clear: both; display: block ;} * Html. clearfix {height: 1% ;} . Clearfix {display: block ;}

III. Floating IE6 bilateral distance

1. Use display: inline for floating elements;

2. 3px spacing bug in IE6: in IE6, when the text (or non-floating element) follows a floating element, there will be a 3px interval between the text and the floating element, add the display: inline or design-3px spacing to the floating layer to solve this bug.

3 pixel spacing bug

Min-height in div + css

Method 1:

The code is as follows:	Copy code
# DIVname { Min-height: 150px; * Height: auto! Important; _ Height: 150px; Overflow: visible; }

Method 2:

The code is as follows:	Copy code
# DIVname { Min-height: 1000px; _ Height: expression(document.doc umentElement. clientHeight | document. body. clientHeight)> 1000? "1000px ":""); }

V. z-index bug in IE

Generally, ie has high requirements on the parent level. If the parent level has the position attribute but does not have the z-index attribute, the default value is 0, therefore, no matter how high the z-index attribute is in the subset, it is useless.
Therefore, a z-index: 1 attribute must be assigned to the parent class containing the z-index attribute. This can solve many inexplicable problems.

6. bug in IE6 window size adjustment

When the body is placed in the center and the size of IE browser is changed, any relative positioning element in the body will remain unchanged. The solution is to define position: relative; for the body.

7. Incompatible text size and line height

For fonts of the same size, the downlink height and size of each browser are different. line-height must be set.

8. mirror margin bug

In IE6, when a float element exists in the outer element, for example, if the outer element defines margin-top: 5px, the margin-bottom: 5px will be automatically generated, and the padding will also have similar problems, solution: Set border or float for the outer element.

IX. White space under img

In html, there are:

<Div>

</Div> , You will find that the bottom of the image is not close to the bottom of the container, is caused by a blank character after the img, to eliminate the need to write like this:

<Div>
</div> The next two labels must be close to each other. This bug still exists in IE7. Solution: display: block.

10. Image and text

You know that img align has text-top, middle, and absmiddle. You can try to adjust img and text so that they can be consistent in ie and ff, you will not be satisfied with the call. Simply float the img and text, and adjust it with margin.

Line-height is lost. <Div style = "line-height: 20px"> text </div>. Unfortunately, the line-height effect of the single line in ie6 disappears ..., the reason is that the inline-block element is written together with the inline element. Solution: float the img and text.