Some issues with CSS compatibility

Div+css page Layout This is a trend, I also began to adapt to this trend, but in the use of DIV+CSS website design, should pay attention to CSS style compatible with different browser issues, especially for the full use of div+css design of the page, should pay more attention to IE6 IE7 FF is compatible with CSS styles.

key to compatibility processing

1. DOCTYPE affects CSS processing

2, FF set padding after the div will cause width and height increase (the actual width of the div =div width +padding), but IE will not. WORKAROUND: Set the two width of IE and ff for Div,

Add IE-specific tag "*" before the width of IE. Or use!important to set a height and width (but with IE7 support for!important, so use caution).

3, with the support of IE7 to!important,!important method is now only for IE6 compatibility. (Note the wording. Remember that the statement location needs to be advanced.)

For example: #example {width:100px!important;/* IE7+FF */width:103px;/* IE6 */}

4, the vertical center div problem: Vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line

5, in Mozilla Firefox and IE in the box model interpretation inconsistent lead to 2px resolution method:
DIV{MARGIN:30PX!IMPORTANT;MARGIN:28PX: Note that the order of the two margin must not be written in reverse, important this property IE is not recognized, but other browsers can be recognized.     So in the IE is actually interpreted as such: div {maring:30px;margin:28px} repeated definition, according to the last one to execute, so can not write only margin:xx px!important; #box {width:600px;//for ie6.0-w\idth:500px;//for ff+ie6.0} #box {width:600px!important//for ff width:600px;//for ff+i e6.0 width/**/:500px; For ie6.0-}

methods of CSS hack       The first thing to know is:        All browsers universal height:100px;       IE6 Dedicated _height:100px;       IE7 dedicated *+height:100px;       IE6, IE7 shared *height:100px;        IE7, FF shared height:100px!important;        For example:    &nbs P   #example {height:100px;}/* FF */        * HTML #example {height:200px;}/* IE6 */&nbs p;       *+html #example {height:300px;}/* IE7 */        This method is simple          To cite a few examples:       1, ie6-ie7+ff        #example {             height:100px,/* ff+ie7 */             _height:200px; /* IE6 */ }         In fact, the third method described above can also be            #example {&nbs p;          height:100px!important; /* Ff+ie7 */            height:200px; /* IE6 */ }        2, ie6+ie7-ff          #example {&NBSP;&NB Sp       height:100px; /* FF */        *height:200px; /* Ie6+ie7 */ }           3, ie6+ff-ie7   #example { height:100px;/* IE 6+ff */ *+height:200px; /* IE7 */ }  4, IE6 IE7 FF are different         #example {       &NBSP;H eight:100px; /* FF */        _height:200px; /* IE6 */        *+height:300px; /* IE7 */ }  or:     #example {        height:100px;/* FF */       *height:300px; /* IE7 */        _height:200px; /* IE6 */ }      &NBsp     It is important to note that the order of the code must not be reversed, or else naught. Because the browser in the interpretation of the program, if the same name, will be covered in the back of the previous, as if the variable is assigned a reason, so we put the general of the front, the more dedicated to put the back         Explain 4 of the Code:           When reading the code, the first line height:100px; Everybody is universal, IE6 IE7 FF all show 100px  to the second line *height:300px; FF does not recognize this attribute, IE6 IE7, so FF also display 100px, and IE6 IE7 the first row to get the height property to cover, all show 300px  to the third row _height:200px; only IE6 know, So IE6 again covered the height in the second row and finally showed 200px  so that three browsers have their own height property .       *+html for IE7 compatibility You must ensure that the top of the HTML has the following declaration:  <! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >     use the IE-specific conditional annotations<!--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 below-<link rel= "stylesheet" type= "Text/css" hr ef= "Ie.css"/> <! [endif]--> ie if condition hack     1. <!--[if! ie]><!--> In addition to IE can be recognized <!--<! [endif]-->     2. <!--[if ie]> all IE recognizable <! [endif]-->     3. <!--[if IE 5.0]> only IE5.0 can be identified <! [endif]-->     4. <!--[if IE 5]> only IE5.0 and IE5.5 can be identified <! [endif]-->     5. <!--[if GT IE 5.0]> IE5.0 and IE5.0 above can be identified <! [endif]-->     6. <!--[if IE 6]> only IE6 recognizable <! [endif]-->     7. <!--[if Lt IE 6]> IE6 and IE6 The following versions are recognized <! [endif]-->     8. <!--[if GTE IE 6]> IE6 and IE6 above are recognized <! [endif]-->     9. <!--[if IE 7]> only IE7 recognizable <! [endif]-->     10. <!--[if Lt IE 7]> IE7 and IE7 The following versions are recognized <! [endif]-->     11. <!--[if GTE IE 7]> IE7 and IE7 above are recognized <! [endif]--> Note: GT = Great then greater than      > = > Greater Than,       lt = Less then smaller than  &nbsp ;   < = < Smallat     gte = Great then or Equal is greater than or equal to     lte = Less then or Equal smaller than or equal to     float closure (clearing float)  Web pages appear to be misaligned on some browsers many times because of the use of float instead of really closed, which is one reason the div is not adaptive to height. If the parent div is not set to float and its sub-div is set to float, the parent Div cannot wrap the entire sub-div, which typically appears under a parent div with multiple sub-div. Solution:     1, to the parent Div also set up float    2, after all the sub-div new add an empty div (not recommended, some browsers can see empty Div generated gap)      such as:   .parent{width:100px;}  .son1{float:left;width:20px;}  .son2{float:left;width:80px;}  .clear{clear:both;margin:0;parding0;height:0px;font-size:0px;}   <div class= "Parent" > <div class= "Son1" ></div> <div class= "Son2" > </div> <div class= "Clear" ></div> </div>      3, Universal float closure    Add the following code to the global CSS, add class= "Clearfix" to the div that needs to be closed   code:  <style> /* 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 */ </style>  :after (Pseudo object), set what happens after the object, Usually used in conjunction with content, IE does not support this pseudo-object, non-IE browser support, so does not affect the Ie/win browser. This is the most troublesome.   4, overflow:auto  as long as the parent div in the CSS to add Overflow:auto to take care of.    example:   .parent{width:100px;overflow:auto} .son1{float:left;width:20px;}  .son2{float:left;width:80px;}   <div class= "Parent" > <div class= "Son1" ></div> <div class= "Son2" > </div> </div>   in addition to IE, can really solve. Come down to solve the problem of IE, plus "_height:1%", this problem is completely solved.          5, as an external wrapper div do not set dead 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 the automatic   should be invalid under IE, this time should trigger the layout of IE private properties (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;}

The question of double margin

Set the float property of the Div, in the set margin property, this under IE6, there will be a margin doubling phenomenon; This is a famous bug in IE6. The solution is to set properties on the DIV

Display:inline; For example:

< #div id= "imfloat" > corresponding CSS is #IamFloat {float:left; MARGIN:10PX;/*IE8 FF is understood as 10px*/Display:inline;/*ie6 /}

 

Minimum width of the page

The minimum width of the page min-width is a handy CSS command that can specify that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE does not recognize this, and it actually

Width as the minimum. In order for this command to work on IE, you can put a <div> into the <body> tab, then specify a class for the Div, 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 line 2nd

Width uses JavaScript, which only IE recognizes, which will make your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.

 

IE6 3-pixel bug

IE6 3 pixel bug DIV set float floating, IE6 is generated 3 pixels of the bug, the left side of the object floating, the right side with the left side of the patch to locate, the text inside the right object will be left

There is a spacing of 3px. #box {float:left; width:800px;} #left {float:left; width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This sentence is

Key} <div id= "box" > <div id= "left" ></div> <div id= "right" ></div> </div> six IE6 void generation IE6 under why there is a gap in the picture to solve this

There are many ways to fix the bug, either by changing the layout of the HTML, or by setting the IMG to Display:block or setting the Vertical-align property to Vertical-align:top | Bottom |middle |text-

Bottom can all be solved.

Double distance generated by floating IE6

  #box {float:left;       width:100px;        margin:0 0 0 100px; }  In this case IE6 will produce 200px distance    workaround: Add display:inline, make floating ignore    here's a little bit about block, Inline two elements, the block element is characterized by: always start on new lines, height, width, row height, margin can be controlled (block elements), the characteristics of the inline element is: and other elements on the same line  ,... Uncontrollable (inline Element);   #box {display:block;//Can be simulated as a block element display:inline for inline elements;//effect of the same row arrangement  

use JS to judge different browsers to load different CSS

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<script type= "Text/javascript" >
Call different css! depending on the browser
if (Window.navigator.userAgent.indexOf ("MSIE") >=1)
{
document.write (' <link href= ' ie.css "type=" Text/css "rel=" stylesheet "/>");
}else{
document.write (' <link href= ' ff.css "type=" Text/css "rel=" stylesheet "/>");
}
</script>
<body >
<div id= "box" > in different browsers, the color of this line of words should be different! </div>
</body>

Some issues with CSS compatibility