Common CSS browser compatibility Adjustment

The benefits of using CSS + Div to write website code are obvious. I will not talk about it here, but different browsers do not have uniform interpretations of CSS. , Causing page dislocation in different browsers ...... The reason why the cs.phontol.com page is messy is that IE6 thinks that a div is too wide, so it squeezed the DIV that should have been float; Right Continue. Phontol.com. If it is set to IE6 and the normal width is displayed, one page will be missing if it is viewed in IE7 and Firefox. Blocks are the same .... What should I do with cs.phontol.com? Use CSS hack to rewrite CSS code Cs.phontol.com Before cs.phontol.com rewrite: XXX. yyy: {width: 600px;} (when IE7 and Firefox are set to display normal 600px , IE6 will be misplaced, changed to 590px, then IE6 will be normal, IE7 and Firefox will not be perfect) After cs.phontol.com is rewritten: XXX. YYY {width: 600px; * width: 600px; _ width: 590px ;} Cs.phontol.com (Firefox does not know * and _, while ie knows *, IE7 does not support _, IE6 supports _) The cs.phontol.com sequence must not be messy, because when the definition is repeated, the browser uses the last rendering by default. Be sure to run normally first, then *, and finally _. Phontol.com When reading Firefox like cs.phontol.com, you only see the normal definition, while Ie can see the definition of the second *. The first normal definition is omitted. in IE, because IE7 does not support _, the first rule is executed with *. IE6 supports _, In order to think that the "*" is also a duplicate definition, ignore it, and execute the last definition. Phontol.com Cs.phontol.com Cs.phontol.com is popular! Important for CSS hack, But I think! Important is too long to write, no Such as * and. Phontol.com Cs.phontol.com Cs.phontol.com just remember IE7 = *, IE6 = _, and then write the code in the order of Firefox, IE7, and IE6, Generally, most users can browse normally. Phontol.com Source: collected and organized on the Internet In IE, floating attributes defined by some layers can be omitted in many places, but FF does not work. Each layer must be clearly written. Display: inline; must be added to IE6 during the horizontal arrangement. Otherwise, the frontend will have double spacing, while FF will not. Display is normal. These are caused by different browser default values. Are displayed normally because they have clearly defined the default differences. The following compatibility points refer to the Internet CSS has high requirements on browser compatibility. In general, there are great resolution differences between IE and Firefox (ff, Here we will introduce the compatibility points. Common compatibility problems: 1. doctype affects CSS Processing 2. Firefox: When Div sets margin-left and margin-Right to auto, it is already centered, and IE does not work. 3. When setting text-align for Firefox: Body, set margin: auto (mainly margin-left and margin- Right) can be centered 4. Firefox: After padding is set, the DIV will increase the height and width, but IE will not, so you need to use it! Set important to one more Height and width 5. Firefox: supported! Important, ie is ignored, available! Important sets a special style for Firefox 6. Vertical center problem of Div: vertical-align: middle; Increase the line spacing to the same height as the entire Div line- Height: 200px; insert the text to center vertically. The disadvantage is that you need to control the content rather than line feed. 7. cursor: pointer can display the cursor finger shape in iefirefox Firefox at the same time. Hand can only be IE 8. Firefox: adds a border and a background color to the link. You must set display: block and float: left to ensure no line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can Insert a space. 9. The box model interpretation in mozillafirefox and IE is inconsistent, resulting in a 2px difference. solution: Div {margin: 30px! Important; margin: 28px ;} Note that the order of the two margin entries must not be reversed. According to Alibaba Cloud! The important attribute ie cannot be recognized, The browser can recognize it. So in IE, it is actually explained as follows: Div {maring: 30px; margin: 28px} If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important; 10. The box interpretations of ie5 and IE6 are inconsistent. Under ie5 Div {width: 300px; margin: 0 10px 0 10px ;} The DIV width is interpreted as 300px-10px (right fill)-10px (left fill). The final Div width is 280px, while in IE6 AND ITS The width of the browser is calculated by px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can do the following: Modify Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px} I don't quite understand what/**/is. I only know that both ie5 and Firefox support this, but IE6 does not. 11. UL labels have padding values by default in Mozilla, while in IE, only margin has a value, so we first define Ul {margin: 0; padding: 0;} solves most problems.