CSS compatibility between IE and FF browsers-Web Standard tutorial

CSS compatibility between IE and FF browsers-Web Standard tutorial I. Use of important in IE6 and FF . Box1 {width: 150px! Important ;} . Box1 {width: 250px ;} ! Important indicates that this setting has a priority and IE has encountered it! Important does not make an error. It only ignores its function. If width is set later, ie uses the last width as the standard. If there are no other settings later, the current value is used, that is, the previous one! The value of important. For example: # test {width: 300px! Important} ie and FF both display 300px. If there is a value later than IE, the following value is displayed, and FF is displayed above! The value of import! Other browsers recognize this important. Because of its priority, the width previously set always prevails. # Test {width: 300px; width: 400px! Important ;} The result is that the width of IE and FF is 400px. # Test {width: 300px! Important; width: 400px ;} Result FF: 300px ie: 400px So, use! When important is used! Put important in front. But the problem comes again. IE7 can recognize it! Important, please refer to the following! Ii. CSS style for Firefox IE6 IE7 Most of them are used now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests, but IE7 is correct! Important can be correctly explained, and the page will not be displayed as required! If you find a good hack Method for IE7, you can use "* html". Now you can use IE7 to browse it. It should be okay. You can write a CSS file as follows: #1 {color: #333;}/* Moz */ * Html #1 {color: #666;}/* IE6 */ HTML * #1 {color: #999;}/* IE7 */ The original text is * + html #1 {color: #999;}/* IE7 */. It cannot be displayed under IE7 by myself, so it is changed to HTML * #1 {color: #999;}/* IE7 */ In Firefox, the font color is displayed as #333, and in IE6, the font color is displayed as #666, in IE7, when the font color is displayed as #999, "_" can be used to Implement CSS hack only recognized by IE. Some friends may think of "_" hack, but they are different from each other, because IE7 does not recognize. The ie5.5, IE6, and IE7 browsers can recognize each other; The ff2.0, opera 9, and Safari 2 browsers are not recognized. 3. IE7 hack IE7 has fixed many bugs and added support for some selector characters. So now, for example, * HTML {} and HTML> body {} and {},! Important and other hack hidden or displayed for IE will be invalid in IE7. Although CSS hack is not recommended, it is a foolproof filter, but it can only appear in HTML, and CSS hack is useful. Nanobot found some CSS hack for IE7, specifically: > Body HTML * * Html The first two are invalid CSS statements, which are ignored in standard compatible browsers, but not in IE7. For> body, it will replace the missing selector with the global selector *, that is, it will be processed as *> body, and not only for> selector ,,~ This phenomenon also exists in the selector. For HTML *, because there is no space between HTML and *, it is also a CSS syntax error, but IE7 does not ignore it, but mistakenly considers there is a space here. For the third type of * HTML, IE7 considers that the DTD declaration before HTML is also an element, so HTML will be selected. Among the three methods, only this method is legal CSS writing, that is to say, it can be verified by the validator, so it is also the hack usage recommended by the author. IE 6 and below Use * HTML {} to select the HTML element. IE 7 and below Use * HTML, * HTML {} to select the HTML element. IE 7 only Use * HTML {} to select the HTML element. IE 7 and modern browsers only Use HTML> body {} to select the body element. Modern browsers only (not IE 7) Use HTML>/**/body {} to select the body element. Iv. IE and FF explain the box model differently. Code Description: # test {width: pixel PX! Important; width: 648px; padding-left: 2px; Background: # FFF ;} The bandwidth shown in test is pixel PX. The total width of IE box is: width padding border margin. The total width of FF box is the width of width, The width of padding border margin is within the width. If box {width: "300"; padding: "5px" ;}, the width of box in IE should be: 310. While the FF width is 300 If the box is filled, use box {width: "290 "! Important; width: "300" ;}to ensure The width of the box is always PX, but it will not be extended. In ff, it will not cause dissatisfaction in the floating layer. Wayping: # Box {width: 300px; padding: 5px; Background-color: # 6666cc;} // The IE width is 300px and FF is 310px. # Box1 {width: 290px! Important; width: 300px; padding: 5px; Background-color: #999966;} // ie: Px in width and PX in FF Note: There is an error in the example. If "" is added to the value, for example, width: "300", Some browsers cannot recognize it. In the example, the padding: 5px parameter is missing. 5. UL labels have padding values in Mozilla, while only margin has values in IE. Set ul {margin: 0; padding: 0} 6. ie cannot tell the difference between the parent-child relationship and the parent-child relationship. Wayping: The continuation link is the inheritance link. 7. Setting padding for Div under FF will increase the width and height, but IE will not. (available! Important solution) 8. center problem 1. Center vertically. Set line-height to the same height of the current Div, and then use vertical-align: middle. (do not wrap content .) 2. horizontal center. Margin: 0 auto; (of course not omnipotent) 3. To add a style to the content of tag a, set display: block) 4. The difference between FF and IE in understanding box leads to the 2px difference. There are also issues such as Div set to float and margin doubling under IE. 5. Different performances of UL: UL labels have list-style and padding by default under ff. It is recommended to declare them in advance to avoid unnecessary troubles. (common in navigation labels and content lists) 6. Do not set the height of the external wrapper Div. It is best to add overflow: hidden to achieve highly adaptive. 9. Use cursor: pointer if both Ie .. ie and FF recognize the hand-shaped cursor hand only. This article is good and can be used for memo ......     Bytes ------------------------------------------------------------------------------------------------------ Supplement: CSS style for Firefox IE6 IE7 1. CSS style for Firefox IE6 IE7 Most of them are used now! Important comes to hack. It can be displayed normally for IE6 and Firefox tests, but IE7 is correct! Important can be correctly explained, and the page will not be displayed as required! If you find a good hack Method for IE7, you can use "* + html". Now you can use IE7 to browse it. It should be okay. You can write a CSS file as follows: #1 {color: #333;}/* Moz */ * Html #1 {color: #666;}/* IE6 */ HTML * #1 {color: #999;}/* IE7 */ The original text is * + html #1 {color: #999;}/* IE7 */. It cannot be displayed under IE7 by myself, so it is changed to HTML * #1 {color: #999;}/* IE7 */ The font color in Firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999. 2. center problem in CSS layout The main style definition is as follows: Body {text-align: center ;} # Center {margin-Right: auto; margin-left: auto ;} Note: First, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough. However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;" It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence, you only need to define margin-Right: auto; margin-left: auto; in each split Div. 3. Different explanations for the box model. # 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; // For ie6.0- } 4. Double distance of floating IE # Box {float: Left; width: 100px; margin: 0 0 0 100px; // in this case, ie will generate a PX distance display: inline; // ignore floating} Here, let's take a closer look at the block and inline elements. The characteristics of the block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); the features of the inline element are as follows: On the same line as other elements ,... uncontrollable (embedded element ); # Box {display: block; // The embedded element can be simulated as the block element display: inline; // the result of the same row arrangement is dilay: Table; 5 questions about IE and width and height IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all. For example, to set a background image, the width is 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. Minimum page width Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, but it actually uses width as the minimum width. To enable this command to be used on IE, you can place <div> under the <body> label and specify a class for div: Then 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 is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment. 7. Clear floating . Hackbox { Display: Table; // Display the object as a table at the Block Element Level } Or . Hackbox { Clear: both; } Or add: After (pseudo object) to set the content after the object, which is usually used with content. ie does not support this pseudo object, not supported by IE browsers, so it does not affect IE/win browsers. This is the most troublesome ... # Box: After { Content :"."; Display: block; Height: 0; Clear: both; Visibility: hidden; } 8 DIV floating ie text produces 3 pixel bug The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px 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 } HTML code <Div id = Box> <Div id = left> </div> <Div id = right> </div> </Div> 9 attribute selector (this is incompatible and is a bug in hiding CSS) P [ID] {} Div [ID] {} P [ID] {} Div [ID] {} This is hidden for versions earlier than ie6.0 and ie6.0. It is used by ff and opera. There is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in P [ID, all P tags have IDs in the same style. 10 Internet Explorer When the DIV application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue. Some content cannot be displayed. When you select this area, the content is displayed on the page. Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible. 11 highly unsuitable The height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses Margin or paddign. Example: <Div id = "box"> <P> content in the p object </P> </Div> CSS: # Box {background-color: # Eee ;} # Box P {margin-top: 20px; margin-bottom: 20px; text-align: center ;} Solution: Add two empty Div objects to the upper and lower sides of the P object. CSS code:. 1 {Height: 0px; overflow: hidden;} or add the border attribute to the div.