CSS Compatibility FAQ Summary

Div+css design IE6, IE7, FF 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 compatible with CSS styles .  what is browser compatible: When we use a different browser (Firefox IE7 IE6) to access the same site, or page, there will be some incompatibility issues, in this browser display normal, under another kind of chaos, We are very annoyed when we write CSS, just fixed the problem of this browser, and another browser has a new problem.  !important (limited functionality)   with IE7 support for!important, the!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 */ } & nbsp; second, the CSS hack method   First need to know is:   all browsers general Height:100px; ie6 dedicated _HEIGHT:100PX;&NBSP;IE7 exclusive *+height: 100PX;&NBSP;IE6, IE7 shared *height:100px; ie7, FF shared height:100px!important;   such as:   #example { height:100px; }/* FF */  * html #example {height:200px;}/* IE6 */  *+html #example {height:300px;}/* IE7 */&N bsp;  The following method is relatively simple    a few examples:   1, ie6-ie7+ff   #example { height:100px;/* ff+ IE7 */ _height:200px; /* IE6 */ } In fact, the first method said above can also   #example { height:100px!important;/* ff+ie7 */ height:200px;/* IE6 */ }   2, ie6+ie7-ff   #example { height:100px;/* FF */ *height:200px;/* Ie6+ie7 */ } & Nbsp;3, ie6+ff-ie7   #example { height:100px;/* ie6+ff */ *+height:200px;/* IE7 */ } & Nbsp;4, IE6 IE7 ff varies    #example { height:100px;/* FF */ _height:200px;/* IE6 */ *+height : 300px; /* IE7 */ }  or:  #example { height:100px;/* FF */ *height:300px;/* IE7 */ _height:200px;/ * IE6 */ }   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 name of the word, will be covered in the back of the previous, as if the variable is assigned a reason, so we put the general in front, the more dedicated to the back    explain the 4 code:   read 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 compatibility with 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" >     Third, use IE-specific conditions comments   <!--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 "href=" 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 sign  lt = Less then smaller than  < = < less than  gte = Great then O R Equal is greater than or equal to  lte = Lesser then or Equal is less than or equal to    four, CSS filter method   Create a new CSS style as follows:   #item { & nbsp;width:200px;  height:200px;  background:red;  }   Create a new Div, and use the style of the CSS defined previously:   <div >some text here</div>   add the lang attribute here in the body expression, Chinese is zh:   <body lang= "en" >   now defines a style for the DIV element:   *:lang (en) #item {  background:green! important;  }   is doing this to overwrite the original CSS style with!important because: lang selectorie7.0 does not support, so this sentence will not have any effect, so also achieve the same effect under the ie6.0, but unfortunately, Safari also does not support this property, so you need to add the following CSS style:   #item: Empty {  The  background:green!important;  }  :empty Selector is a specification for CSS3, although Safari does not support this specification, but this element is still selected. Whether or not this element exists, the green is now on a browser other than the version of IE.     float closed (clearing float)    Web page is displayed on some browsers the dislocation is often caused by the use of float and not really closed, This is one reason why div cannot adapt to heights. 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>   The author said: The principle is that the peripheral elements are not very good extension, the problem is in the overflow, because overflow is not visible (see the explanation of the world). Now just add a "overflow:auto" to the peripheral elements, you can solve the problem, the result is in addition to IE, can really solve. Come down to solve the problem of IE, plus "_height:1%", this problem is completely solved.    I tried, in fact, do not add "_height:1%" under IE also line, keep it.    six, need to pay attention to some andThe   1 details, 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 .   solution: to div set IE, FF two width, before the width of IE, plus ie specific mark "*" number. &NBSP;&NBSP;2, the page center issue.   body {Text-align:center;} is sufficient under IE, but the FF fails.    Solution: Add "margin-right:auto; Margin-left:auto; "  3, sometimes in the IE6 saw some strange gap, but we are highly clearly set up AH."    Solution: Try adding "font-size:0px" to the div with gaps;   4, about the hand-shaped cursor. Cursor:pointer. The hand only applies to ie.  5, the double distance generated by the 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;//You can simulate an inline element as a block element display:inline;//Achieve the effect of the same row arrangement   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 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.    workaround: To make this command available on IE, you can put a <div> on the <body> tab, then assign a class:  to the div and then design the CSS:  #container { min-width:600px; width:e-xpression (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 will make your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment. The padding and margin  ul tags of the &NBSP;&NBSP;7, UL, and form labels have padding values in the FF, whereas in IE only margin defaults to the value. form tags in IE, will automatically margin some margin, and in the FF margin is the 0;   solution: CSS in the first use of such a style ul,form{margin:0;padding:0;}.  8, div floating IE text produces 3 pixels of bug   to the left of the 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 gap .  #box { float:left;  width:800px;}   #left { float:left; width:50%;}   #right { width:50%; } *html #left { margin-right:-3px; //is the key  } html code  <div Id=box> <div Id=left></div> <div Id=right></div> </div >   for the above code, here is my understanding:   first, as long as right defines the width property,In the FF absolutely will be two lines of display   Second, two width are defined as a percentage, even if all 100% under IE will also be displayed on a line. So the above sentence of the so-called "This is the key" is useless, do not add also in a row, unless you define the width of the value to be used.    so the above code is actually not very useful, at least not in FF. In fact, as long as only define the left width on the line, right does not define width in either IE or FF can be successful, but so the parent div box does not really contain the left and right two sub-div, you can use the 5th method I said above to solve. The simplest way is to add float:left in right to OK   9, truncation ellipsis   .hh {-o-text-overflow:ellipsis;  text-overflow:ellipsis; white-space: nowrapoverflow:hidden; }  This is the longer the length will be the self-cutting off the more part of the text, And ends with an ellipsis. Technology is good technology, many people like to mess with, but note that Firefox does not support &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;CSS skills  1.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 not to wrap   2. Margin doubling question     setting the div to float doubles 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" > corresponding CSS is #IamFloat {float:left; Margin:5px;/*ie understood as 10px*/Display:inline;/*ie and understood as 5px*/}   3. Double distance generated by 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} hereTo elaborate on 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 be simulated as block element display:inline for inline elements;//Implement the same row arrangement effect diplay:table; 4 ie with width and height problems ie does not recognize min-this definition, 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. 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. To make this command available on IE, you can put a <div> into the <body> tab, then assign a class to the Div, and then design the CSS like this: #container {min-width:600px; width: E-xpression (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.div floating IE text generated 3 pixels of the bug left object floating, the right side of the outer patch to the left margin to locate, the right object within the text will be 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 key} <div id= "box" > <div id= "left" ></div> < Div id= "Right" ></div> </div>   7.ie the question of hide and seek when the div application is complex, there are links in each column, and the div is prone to hide-and-seek issues. 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 Div closed, clear floating, adaptive height,  ① such as:< #div id= floata >< #div id= "FLOATB" >< #div id= " NOTFLOATC "> here NOTFLOATC 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 < #div class= "FLOATB" > < #div class= "NOTFLOATC" > Add < #div class= "clear" > this div must pay attention to the position, And there must be no nested relationship with the two Div siblings with the float attribute, otherwise an exception will occur. And the clear style is defined as follows:. clear{Clear:both;}  ② as an external wrapper div do not set dead height, in order to let 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, properties with zoom:1, can be done, so that it achieves compatibility. 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 probablyIt's float:left. Sometimes we need to do a unified background behind the float div in the n column, for example: <div id= "page" > <div id= "left" ></div> <div id= " Center "></div> <div id=" right "></div> </div> for example we want to set the page background to blue, to achieve all three columns of the background color is the purpose of blue, But we will find that as the left center 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 centered and cannot be set to float, so we should solve <div Id= "page" > <div id= "bg" style= "float:left;width:100%" > <div id= "left" ></div> <div id= "center" ></div> <div id= "right" ></div> </div> </div> embed a float left with a width of 100% div resolution   ④ Universal float closed (very important!) The principle of clear float can be found in [how to clear floats without Structural Markup], add the following code to the global CSS, the need to close the DIV plus C Lass= "Clearfix" can be done. /* Clear Fix */. Clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}. clearfix {DISPL Ay:inline-block; }/* Hide from IE mac */. Clearfix {Display:block;}/* end hide from IE mac */* End of Clearfix */or This setting:. hackbox{disp lay:table; To use an object as a block elementThe table display of the vegetarian level}   11. Height intolerance is not adaptive when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or paddign. Example: #box {background-color: #eee;}     #box p {margin-top:20px;margin-bottom:20px; text-align:center;}     <div id= "box" >     <p>p object content </p>     </div>     solution: up and down on the P object Add 2 empty div objects to CSS code:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.  12. IE6 why there are gaps in the picture there are many ways to fix this 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 be solved.  13. How to add vertical-align:middle to text input boxes; <style type= "Text/css" > <!--input {   width:200px;    height:30px;    border : 1px solid red;    vertical-align:middle; }--What is the difference between the definition ID and class in the </style> 14.web standard? One, the Web standard is not allowed to duplicate ID, such as div id= "AA" is not allowed to repeat 2 times, and class is defined by classes, Theoretically, it can be infinitely repeated, so that it can be used with the definition of multiple references. Two. Attribute priority problem ID is higher than class, see example three above. Convenient JS and other client-side script, if you want to script an object in the page, then you can define an ID for him, otherwise it can only be used to traverse the page element plusSpecify a specific attribute to find it, which is a relatively waste of time resources, far less than a simple ID.  15. The method of displaying the contents of Li in an ellipsis after the length of this method is applicable with IE and op browser <style type= "Text/css" > <!--li {   width:200px;     White-space:nowrap;    text-overflow:ellipsis;    -o-text-overflow:ellipsis;    overflow:hidden;     Why does ie not set the scrollbar color in the Web Standard? The solution is to replace body with HTML <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < Meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/> <style type=" Text/css "> <!--HTML {   scrollbar-face-color: #f6f6f6;   & Nbsp;scrollbar-highlight-color: #fff;    scrollbar-shadow-color: #eeeeee;    scrollbar-3dlight-color: #eeeeee;    scrollbar-arrow-color: #000;    scrollbar-track-color: #fff;    scrollbar-darkshadow-color: #fff;   &NBSP, and </style> 17. Why can't I define a container with around 1px height IE6 This problem is because the default row GaoAnd there are many ways to solve it, such as Verflow:hidden | zoom:0.08 | Line-height:1px 18. How can I make the layer appear above flash? The solution is to set the flash to transparent <param name= "wmode" value= "Transparent"/>  19. How to make a layer vertically centered in the browser here we use the percent absolute positioning, with the method of negative value of the outer patch, the size of negative value for its own width height divided by two <style type= "Text/css" > <!--div {    Position:absolute;    top:50%;    lef:50%;    margin:-100px 0 0-100px;    width:200px;    height:200px;   &NBSP;BORDER:1PX solid red;   &nbsp, </style> ff and IE   1. Div Center Problem Div set Margin-left, margin-right for Auto is already centered, ie does not, ie need to set body Center, first in the parent element definition text-algin:center; This means that the content within the parent element is centered.  2. The border of the link (A-label) and the background a link with a border and a back color, you need to set the Display:block, and set Float:left to ensure that 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.  3. Hover style does not appear after hyperlink access the hyperlink style that has been clicked is not hover and active, and many people should have encountered this problem, the workaround is to change the order of CSS properties: l-v-h-a Code: < Style type= "Text/css" > <!--a:link {} a:visited {} a:hover {} a:active {}--</style> 4. Cursor Cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can &NBSP;&NBSP;5.UL padding and margin ul label in FF, the default is padding value, and in IE only There is a margin default value, so first define ul{margin:0;padding:0;} will be able to solve most of the problems  6. Form label this tag in IE, will automatically margin some margins, and in the FF margin is 0, so if you want to show consistency, so it is best to specify the margin and padding in the CSS, for the above two problems, In my CSS, I usually use this style first ul,form{margin:0;padding:0;} The definition died, so the back will not be a headache for this.   7. The box model explains the inconsistency problem in the FF and IE the box model interpretation inconsistency results in a 2px solution: 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 recognize it. 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:600 px for ff+ie6.0 width/**/:500px; For ie6.0-}   8. Property selector (This is not compatible, is a bug that hides CSS) p[id]{}div[id]{} This is hidden from the versions of IE6.0 and IE6.0, FF and opera roles. There is a difference between the property selector and the child selector, the range of the sub-selector is reduced in form, the range of the property selector is larger, such as P[id], and all P tags have the same type of ID.   9. The most ruthless means-!important; If there is no way to solve some of the details, you can use this sideFF will automatically parse for "!important", but IE will be ignored. tabd1{Background:url (/res/images/up/tab1.gif) no-repeat 0px 0px!important; *style for ff*/Background:url (/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} It is worth noting that XXXX!important is placed on top of the other sentence, which has already mentioned  

CSS Compatibility FAQ summary