CSS browser compatible solution_CSS/HTML

1. The background of the web page is semi-transparent
The background of the web page is semi-transparent

Copy code The code is as follows:

opacity:0.8;
filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=80)"; CSS method in IE6 to solve the translucency problem of 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');
}

2. Clear floating

Copy code The code is as follows:

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

3. Floating IE6 double margins
1. Use display:inline;
2. 3px spacing bug under IE6: In IE6, When text (or non-floated elements) follows a floating element, there will be an extra 3px gap between the text and the floating element. Add display:inline or design a -3px spacing to the floating layer to solve this bug.
3 pixel spacing bug
Min-height in div css
Method 1:

Copy code The code is as follows:

#DIVname {
min-height:150px;
*height:auto!important;
_height:150px;
overflow:visible;}

Method 2:

Copy code The code is as follows:

#DIVname {
min-height:1000px;
_height:expression((document.documentElement.clientHeight||document.body.clientHeight)>1000?"1000px":"");
}

5. Z-index bug under IE
Generally speaking, IE has relatively high requirements for the parent. If the parent has a position attribute but does not give a z-index attribute, The default is 0, so no matter how high the z-index attribute is in the subset, it is useless.
So generally, you need to give the parent containing the z-index attribute a z-index:1 attribute, which can solve many inexplicable problems.
6. IE6 window resizing bug
When the body is placed in the center and the size of the IE browser is changed, any relatively positioned elements in the body will be fixed. The solution is to define position:relative; for the body.
7. Text size and line height are not compatible
For the same font of the same size, the line height and size are different in each browser, so line-height needs to be set.
8. Mirror margin bug
Under IE6, when there is a float element in the outer element, if the outer element defines margin-top:5px, margin-bottom will be automatically generated: 5px, padding will also have similar problems, the solution: set border or float on the outer element.
9. The white space under img
In html there is:

, you will find that the bottom of the picture is not close to the bottom of the container, which is caused by the blank characters after img. To eliminate it, you must write like this:

The last two labels should be next to each other. This bug still exists under IE7, the solution is: display:block.
10. Pictures and text go hand in hand
Everyone knows that the align of img includes text-top, middle, absmiddle and so on. You can try to adjust img and text so that they can be aligned in IE and FF. If the settings are consistent, you will find that no matter how you adjust them, you will not be satisfied. Simply let the img and text float and adjust them with margin.
Lost line-height.

text

. Unfortunately, the single line text line-height effect disappears under IE6. . . , the reason is that the inline-block element is written together with the inline element. Solution: Make both img and text float.