CSS Browser-compatible workaround _css/html

First, the Web page background translucent
Web page Background Translucent

Copy Code code as follows:

opacity:0.8;
Filter: "Progid:DXImageTransform.Microsoft.Alpha (opacity=80)"; IE6 CSS method to resolve PNG picture semitransparent problem:
#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 ');
}

second, clear floating

Copy Code code 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;}

three, floating IE6 bilateral distance
1. Use display:inline for floating elements;
2, IE6 under 3px spacing bug: In IE6, when text (or no floating element) follows a floating element, there is a 3px interval between the text and the floating element, adding display:inline to the floating layer or designing -3px spacing to solve the bug.
3 Pixel pitch bug
Minimum height min-height in div+css
Method One:

Copy Code code as follows:

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

Method Two:

Copy Code code as follows:

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

Five, ie under the Z-index bug
Generally speaking, ie on the parent requirements are relatively high, if the parent has position attribute, but did not give Z-index attribute, that default is 0, so no matter how high the subset of Z-index attributes, are useless.
So in general, you need to give the parent of the Z-index attribute a z-index:1 attribute, which can solve a lot of puzzling problems.
Six, IE6 adjust the size of the window bug
When the body centered, change the size of IE browser, any in the body of the relative positioning elements will not be fixed, the solution is to define the body position:relative; on the line.
Seven, text size and row height incompatible
The same size of the same font, the browser down the height and size is not the same, need to set line-height.
Eight, mirror margin bug
Under IE6, when there are float elements inside the outer element, a similar problem arises when the outer element, such as defining margin-top:5px, automatically generates margin-bottom:5px,padding, solution: The outer element is set border or float.
nine, under the IMG to leave the white
Inside the HTML there are:
<div>

</div>, you will find that the bottom of the picture is not close to the bottom of the container, is an img behind the blank characters caused, to eliminate the need to write this:
<div>
</div> the back two tabs are next to each other. IE7 the bug still exists, the solution: Display:block.
10, pictures and text peer
You know the IMG align have text-top,middle,absmiddle ah what, you can try to adjust the IMG and text so that they in IE and FF under the same, you will find how to tune will not let you satisfied. Simply let img and text are float up, with margin adjustment.
Lost Line-height. <div style= "line-height:20px" > text </div&gt, unfortunately, in the IE6 of a single text line-height effect disappeared ... , the reason is that This inline-block element and inline elements are written together. Solution: Let both img and text float.