DIV+CSS compatible with browser methods such as IE6 IE7 IE8 IE9 and Firefox chrome (not original)

&NBSP;DIV+CSS compatible with IE6 IE7 IE8 IE9 and Firefox Chrome and other browser methods   1.doctype affect CSS processing 2. Ff:div set Margin-left, margin-right for Auto is already centered, IE not 3. Ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center 4. FF: After setting the padding, the div will increase the height and width, but IE will not, therefore need to use!important to set a height and width5. FF: Support!important, IE is ignored, can be used!important for FF special set style 6.div Vertical center 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 do not wrap 7.cursor:pointer can also display the cursor in IE FF finger shape, hand only IE can be 8. FF: Link plus border and background color, need to set Display:block, and set Float:left guarantee not to break line. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar. 9. The box model in Mozilla Firefox and IE does not explain inconsistencies resulting in 2px resolution: div{margin:30px!important;margin:28px;} Note that the order of the two margin must not be written in reverse, according to the statement of AH-jie! Important This property IE is not recognized, but other browsers can recognize it. So in the case of IE is actually interpreted as such: div{maring:30px;margin:28px} Repeat the definition of the last one to execute, so you can not write only margin:xxpx! important;11. The UL tag in Mozilla default is padding value, and in IE only margin has value, so define ul{margin:0;padding:0 first;} will be able to solve most of the problems   precautions:  1, float div mustClosed. For example: (where the properties of Floata, FLOATB are already set to Float:left;)   <div id= "Floata" ></div><div id= "FloatB" > </div><div id= "NOTFLOATC" ></div> here the NOTFLOATC doesn't want to continue panning, but wants to go down the line. 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. Add class= notfloatc between  <div class= "FLOATB" ></div><div  <div "class=" ></div> " Clear "></div> This div must be aware of the declaration location, must be placed in the most appropriate place, and must be with the two with a float attribute of the div sibling, there can be no nested relationship, otherwise it will produce an exception. And the clear style is defined as follows:. Clear{clear:both;} In addition, in order to allow the height can automatically adapt, to add Overflow:hidden in the wrapper, 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) 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;}  2, margin double the question of the div set to float will double the margin set in IE. This is a bug that exists in a IE6. The solution is to add display:inline to this div, for example:  <div id= "imfloat" ></div>  corresponding CSS for    #IamFloat { Float:left;margin:5px;/*ie under the understanding of 10px*/display:inline;/*ie under the 5px*/} 3, about the containment of the container is a lot of time, especially in the container has a parallel layout, such as two, Three float Div, the width is prone to problems. In IE, the outerThe width of the inner layer will be broken by a wider div. Be sure to use Photoshop or firework to take pixel-level accuracy. 4, about the height of the problem if the content is dynamically added, it is best not to define the height. The browser can automatically scale, but if it is static content, the height is best set. (It seems that sometimes does not automatically open up, do not know the specific how to) 5, the most ruthless means-!important; if there is no way to solve some of the details, you can use this method. FF will automatically parse for "!important", but IE will ignore it.    .tabd1{background:url (/res/images/up/tab1.gif) below No-repeat 0px 0px!important; /*style for Ff*/background:url (/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}  It is important to note that XXXX!important this sentence is placed on the other sentence above, has mentioned IE7.0 support for CSS and new problems. Browser more, Web page compatibility Worse, tired or we, to solve IE7.0 compatibility problem, find the following this article:   now I mostly use!important to hack, for IE6 and Firefox test can be normal display, But IE7 to!important can be correctly explained, will cause the page did not display as required! Search for a bit, find a good hack way for IE7 is to use "*+html", now with IE7 browsing, there should be no problem. Now write a CSS can be:   #example {color: #333;}/* Moz */* HTML #example {color: #666;}/* IE6 */*+html #example {Co Lor: #999; }/* IE7 */  then the font color under Firefox is displayed as #333,ie6 the font color is displayed as #666,ie7 under the font color as #999.    It's a cliché that CSS is compatible with every browser, and the tutorials are all over the Web. The following content is not too many novel, purely personal summary, I hope to have some help for beginners. CSS Hack The following two ways to solve almost all of today's hack. 1, !important  with IE7 's support for!important, the!important method now targets IE6 hack. (Note the wording. Remember that the statement location needs to be advanced.)  <style> #wrapper {width:100px!important;/* IE7+FF */width:80px;/* IE6 */}</style>  2, IE6 /ie77 to Firefox *+html and *html is the unique label of IE, Firefox temporarily does not support. and *+html IE7 Special label . <style> #wrapper {#wrapper { width:120px; }/* FireFox */*html #wrapper {width:80px;}/* IE6 fixed */*+html #wrapper {width:60px;}/* IE7 fixed, note order */}</st yle>   Note: The hack of *+html to IE7 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" >  second, omnipotent Float closure on the principle of clear float see [How to clear floats without Structural Markup] Add the following code to the global CSS, add class= "to the div that needs to be closed" clearf IX "can be done.   <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>    third, other compatibility tips 1, FF set padding after the div will cause width and height increase, but IE will not. (Available!important resolution) 2, centering problem. 1). Center vertically. Set Line-height to the same height as the current Div, and then through Vertical-align:middle. (Note that the content does not wrap.) 2). Center horizontally. margin:0 Auto; 3, if you need to add style to the contents of the a tag, it is necessary to set display:block (common in Navigation label) 4, the difference between FF and IE on BOX understanding results in 2px difference and the div set to float is in IE The issue of double margin. 5, UL label under FF the List-style and padding are the default. It is advisable to declare beforehand to avoid unnecessary trouble. (Common in navigation labels and table of contents) 6, as an external wrapper div do not kill height, preferably plus overflow:hidden. To achieve a highly adaptive. 7, about the hand cursor. Cursor:pointer. And hand only applies to ie. 1 for Firefox IE6 IE7 CSS style   now most of!important to hack, for IE6 and Firefox test can display normally, but IE7 right! Important can be interpreted correctly and will cause the page not to be displayed as required! Find a good IE7 for the hack Way is to use "*+html", now with IE7 browsing, there should be no problem.   Now write a CSS that can be:    #1 {color: #333;}/* Moz */ * HTML #1 {color: #666;}/* IE6 */ *+html # 1 {color: #999;}//IE7 */  then the font color under Firefox is displayed as #333,ie6 under #666,ie7 the font color is displayed as #999.  2 the center problem in CSS layout   The main style definition is as follows:   body {text-align:center;} #centeR {Margin-right:auto; Margin-left:auto; }  Description: First define the Text-align:center in the parent element, which means that the content within the parent element is centered, and the setting for IE is already available. But it can't be centered in Mozilla. The solution is to add "Margin-right:auto" when the child element is defined; Margin-left:auto; "What needs to be explained is that if you want to use this method to make the whole page to center, it is recommended not to set in a div, you can sequentially split multiple div, as long as in each split div defined margin-right:auto; Margin-left:auto; You can do it.  3 box models different interpretations    #box {width:600px;//for ie6.0-w\idth:500px;//for ff+ie6.0} #box {width:600px!important// for FF width:600px; for ff+ie6.0 width/**/:500px; Double distance    #box {float:left; width:100px) generated by the for ie6.0-}  4 floating ie; margin:0 0 0 100px; In this case, IE will produce 200px distance  display:inline; Make floating Ignore} Here's a bit of block,inline two elements, the block element is characterized by: always start on new lines, height, width, row height, margin can be controlled (block element); The inline element is characterized by the same line as the other elements,... Uncontrollable (inline element); #box {display:block;//Can be simulated as block element display:inline for inline elements;//effect of the same row arrangement  diplay:table;  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;}  6 the 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 div under the body tag and then assign a class to the div: then the CSS is designed:  #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.  7 Clear Floating  .hackbox{display:table;//Display the object as a block element level table} or. hackbox{Clear:both;} or join: After (pseudo-object), set what happens after the object, usually 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 of ... #box: after{content: "."; display:block; height:0; clear:both; visibility:hidden;}   8 Div Floating IE text generated 3 pixels of the bug  left object floating, the right side using the outer patch left margin to locate, the right object within the text will be 3px from the left side of the spacing .   #box {float:left; width:800px;} #left {float:left; width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This sentence is the key}html code <div id= "box" > <div id= "left" ></div> <div id= "Right" ></div></div> 9 property selector (This is not compatible, is a bug to hide CSS)  p[id]{}div[id]{} This is for IE6.0 and IE6.0 the following versions are hidden, the FF and Opera action attribute selector and sub-selectors are still different, the range of the sub-selector is reduced from the form, the range of the property selector is larger, such as P[id], all P tags have the same type of ID .  The problem of IE hide and seek   when the div application is complex, there are some links in each column, div 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.  11 height adaptation   height adaptation is the outer height cannot be automatically adjusted when the height of the inner object changes, especially when the inner object is using margin or paddign. Example:   <div id= the contents of the "box" > <p>p object </p> </div> css: #box {}  #box P {margin-top:20px;margin-bottom:20px; text-align:center;}   Workaround: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.  /*ie and Firefox CSS compatibility Daquan */ 1.doctype affect the CSS processing   2.ff:div settings margin-left, margin-right for Auto is already centered, IE does not Line   3.ff:body set text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center &NBSP;&NBSP;4.FF: Set Padd After ING, the div will increase the height and width, but IE will not, therefore need to use!important to set a moreHeight and width  5.ff: Support!important, IE is ignored, available!important for FF special set style   6.div Vertical Center 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 do not wrap   7.cursor:pointer can also display the cursor in IE FF finger shape, hand only IE can   8.ff: link with border and background color, need to set Display:block , and also set Float:left to ensure no line break. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.   9. In Mozilla Firefox and IE, the box model explains inconsistencies resulting in 2px resolution:  div{margin:30px!important;margin:28px;}   Note that the order of the two margin must not be written in reverse, according to the statement!important this property IE is not recognized, but other browsers can be recognized. So in the case of IE is actually interpreted as such: div{maring:30px;margin:28px}  repeating definition words according to the last one to execute, so can not write only margin:xxpx!important;   10.ie5 and IE6 's box explain inconsistent  ie5 under  div{width:300px;margin:0 10px 0 10px;} The width of the  div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated by 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following changes  div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}  about this/**/I don't quite understand, only know IE5 and Firefox are supported but IE6 not supported if anyone understands theWords, please let me know, thank you! :) &NBSP;&NBSP;11.UL tag in Mozilla default is padding value, and in IE only margin has value so define  ul{margin:0;padding:0 first;}   will be able to solve most of the problems    precautions:   1, float div must be closed.    For example: (where the properties of Floata, FLOATB are already set to Float:left;)   < #div id= "Floata" ></#div > <# Div id= "FLOATB" ></#div > < #div id= "NOTFLOATC" ></#div >  here NOTFLOATC doesn't want to continue panning, but wants to go down.   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.     < #div class= "FLOATB" ></#div > < #div class= "NOTFLOATC" ></#div >   Plus  < #div class= "clear" ></#div >  This div must be aware of the declaration location, must be placed in the most appropriate place, and must be in the same class as two div with a float attribute, There cannot be a nested relationship between the two, otherwise an exception is generated.   and define the clear style as follows:  .clear{ clear:both;}   In addition, in order to allow the height to automatically adapt, to add overflow:hidden;  in the wrapper when the box containing float, the height of automatic adaptation in IE invalid, 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;}   2, MARgin doubled the problem.    a div set to float doubles the margin set under IE. This is a bug that exists in a IE6.   solution is to add display:inline;  in this div such as:   < #div id= "imfloat" ></#div >     corresponding CSS for    #IamFloat { float:left; margin:5px;/*ie understood as 10px*/ display:inline /*ie under the 5px*/}  3, about the containment relationship    many times, especially in the container has a parallel layout, such as two or three float div, the width is very prone to problems. In IE, the width of the outer layer is broken by a wider div. Be sure to use Photoshop or firework to take pixel-level accuracy.   4, questions about height    If you are adding content dynamically, it is best not to define it highly. The browser can automatically scale, but if it is static content, the height is best set. (It seems that sometimes does not automatically go down, do not know what the specific)   5, the most ruthless means-!important;   if there is no way to solve some of the details, you can use this method. FF will automatically parse for "!important", but IE will ignore it.  .tabd1{ background:url (/res/images/up/tab1.gif) no-repeat 0px 0px below! Important /*style for Ff*/ background:url (/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}&NBSP;DIV+CSS compatible (ii)  2008 April 02 Wednesday am 10:58&NBSP;&NBSP;DIV+CSS compatible IE6 IE7 Firefox   is most commonly used when distinguishing Firefox from IE! The important method also has the following methods for compatibility issues with different versions of different browsers and browsers, such as: @import, annotations, property selectors, childObject selector and Voice-family methods, these methods in the "CSS site layout record" in the .  is the following is IE and Firefox CSS compatibility issues  1.doctype affect the CSS processing  2.ff:div settings Margin-left, Margin-right for Auto is already centered, IE does not  3.ff:body set text-align, Div needs to set Margin:auto (mainly Margin-left,margi N-right) can be centered  4.ff: After setting padding, Div will increase height and width, but IE will not, therefore need to use!important to set a height and width 5.ff: Support !important, IE is ignored, can be used!important to set the FF special style

Div+css compatible with browser methods such as IE6 IE7 IE8 IE9 and Firefox chrome (not original)