CSS compatibility with browsers sometimes makes people very headache, perhaps when you understand the techniques and principles, you will feel is not difficult, from the online collection of ie7,6 and FIREOFX compatibility treatment method and collated. For web2.0, try to write code in XHTML format, And doctype affect the CSS processing, as the standard, must add DOCTYPE fame.
CSS Tips
Vertical centering problem for 1.P
Vertical-align:middle; Increase the line spacing to as high as the whole P line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line
2. Question of margin doubling
P set to float doubles the margin set under IE. This is a bug that exists in a IE6. The solution is to add display:inline to this p;
For example:
< #p id= "Imfloat" >
The corresponding CSS is
#IamFloat {
Float:left;
Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie under the 5px*/}
3. Double the distance generated by the floating IE
#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore}
Here's a look at block and inline two elements: The block element is characterized by always starting on new lines, height, width, row height, margin can be controlled (block elements); The inline element is characterized by an uncontrolled (inline element) on the same line as other elements;
#box {display:block;//can simulate a block element display:inline for inline elements;//Achieve the effect of the same row arrangement diplay:table;
4 ie with width and height issues
IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is not set width and height.
For example, to set the background image, this width is more important. To solve this problem, you can:
#box {width:80px; height:35px;} Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}
5. Minimum width of the page
Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE doesn't recognize this, and it actually puts width as the minimum width. In order for this command to work on IE, you can put a <p> into the <body> tab and specify a class for P, and then the CSS is designed like this:
#container {min-width:600px; Width:expression (Document.body.clientWidth < 600?) "600px": "Auto");}
The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.
6.p floating IE text generates 3 pixel bug
The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px away from the left.
#box {float:left; width:800px;}
#left {float:left; width:50%;}
#right {width:50%;}
*html #left {margin-right:-3px;//This sentence is the key}
<p id= "box" >
<p id= "left" ></p>
<p id= "right" ></p>
</p>
7.IE Hide and seek problem
When P is applied complex, there are some links in each column, and P and so on are prone to hide and seek.
Some content does not show up when the mouse selects this area is found content is indeed on the page. WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.
8.float p closed; clear floating; self-adapting height;
① such as:< #p id= "Floata" >< #p id= "FLOATB" >< #p id= "NOTFLOATC" > The NOTFLOATC here do not want to continue panning, but want to go down. (where the properties of Floata and FLOATB have been set to float:left;)
This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed. In < #p class= "FLOATB" > < #p class= "NOTFLOATC" > Add < #p class= "clear" > this P must be aware of the position, and must be the same as two with the float property of P peers , there cannot be a nested relationship, otherwise an exception is generated. And the clear style is defined as follows:. clear{Clear:both;}
② as an external wrapper p do not kill height, in order to allow the height can automatically adapt to the wrapper inside add Overflow:hidden; When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private property (evil ie Ah!). ) with zoom:1, can be done, so that the compatibility is achieved.
For example a certain wrapper is defined as follows:
. colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;}
③ for typography, the CSS description we use most probably is float:left. Sometimes we need to do a unified background behind the float p in the N column, for example:
<p id= "Page" >
<p id= "left" ></p>
<p id= "center" ></p>
<p id= "right" ></p>
</p>
For example, we want to set the background of the page to blue, so that the background color of all three columns is blue, but we will find that as the left center of right is stretched downward, and the page actually saves the height unchanged, the problem is because the page is not a float property, And our page is to be centered, cannot be set to float, so we should solve
<p id= "Page" >
<p id= "bg" style= "float:left;width:100%" >
<p id= "left" ></p>
<p id= "center" ></p>
<p id= "right" ></p>
</p>
</p>
Then embed a float left and the width is 100% p resolved
④ Universal float closed (very important!)
For the principle of clear float see [How to clear floats without Structural Markup], add the following code to the global CSS, to the need to close the P plus class= "Clearfix", try Upset.
/* Clear Fix */
. clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
. clearfix {Display:inline-block;}
/* Hide from IE MAC */
. clearfix {Display:block;}
/* End Hide from IE Mac */
/* End of Clearfix */
Alternatively, set:. hackbox{display:table;//Display the object as a block-element-level table}
