compatibility issues and solutions for DIV+CSS

1. Default internal and external margin problems: Different browser default internal and external margin to resolve: *{margin:0;padding:0; 2. Horizontally centered problem: Set Text-align:center ie6-7 text centered, nested block elements also centered FF/OPERA/SAFARI/IE8 text is centered, nested blocks are not centered: block element set 1, Margin-left: Auto;margin-right:auto 2, margin:0 Auto; 3,

1. div>

3. Vertical Center problem: In the browser want to center vertically, set vertical-align:middle; does not work. For example: IE6 text and text input box is not aligned, you need to set Vertical-align:middle,   but the contents of the text box will not be centered vertically: set a container with the same height of the row high line-height: as the container height   4. About the height problem: If you add content dynamically, it's best not to define it. The browser can scale automatically, however, if it is static content, the height is best set. If you set a height, too much content, IE6 will automatically increase the height, other browsers will exceed the border resolution: 1. Set Overflow:hidden; 2. Highly self-increasing height:auto!important;height:100px;     5. IE6 Default div height problem: ie6 The default div height is the height of a font, the height of the div under IE6 is greater than or equal to the height of a word, so a container with a height of 1px is defined under IE6, which shows a   height resolution for a font: Set one of the following properties for this container 1, set Overflow:hidden; 2, set line-height:1px; 3, set zoom:0.08   6. IE6 Minimum Height (width) problem: IE6 does not support Min-height, Min-width properties, the default height is the minimum height, and width is the minimum. WORKAROUND: Use IE6 not supported properties!important that are supported by the rest of the browsers. Set property min-height:200px; Height:auto!important; height:200px;     7. TD Height PROBLEM: the width of TD in table does not contain border width, but Oprea and FF in the height of TD contains border height resolution: set line-height and height. In IE if there is no content in TD, then border will not show   8. div nesting P, there is a blank line problem: div display text, ff, Oprea, chrome:top and bottom will appear blank lines, but in IE does not appear blank lines. FIX: Set P's margin:0px, then set Div's padding-top and Padding-bottom   9. ie6-7 picture under the problem of gaps: block elements contain pictures, ie6-7 will appear in the picture under the gap to solve:   1, in the source code to let and in the same line 2, the picture into block-level object display:block; 3, set the vertical alignment of the picture  vertical-align:top/middle/bottom 4, change the properties of the parent object, if the parent object is wide, high fixed, picture size with the parent object, then you can set the parent element: overflow: hidden;  5, set the floating properties of the picture  float:left;   10. IE6 double margin Problem problem: IE6 set float, while setting margin, there will be double margin problem example float:left;width:100px;margin:0 100px;  solution: Set display:inline;   11. IE6 Weidth is odd, the right more than 1px problem: The parent element with relative positioning, and the width is set to odd, the child element with absolute positioning, in IE6 will appear to the right of more than 1 pixels   resolution: the width of the odd value to even   12. IE6 two layers between 3px problem problem: The left layer is floating, the right does not use floating, then in the IE6 between two layers will produce 3 pixel spacing resolution: 1, the right layer also uses floating  float 2, the left layer to add attributes  margin-right:- 3px;   13. IE6 the problem of absolute positioning of child elements: when the parent element uses padding, the child element uses absolute positioning and cannot pinpoint the resolution: setting  _left:-20px; in a child element _top:-1px;   14. Show Hand Cursor:hand problem: Ie6/7/8, opera       all support   But Safari, FF does not support the solution: written in Cursor:pointer;   (all browsers can recognize)      15. Ie6-7 line-height failure problem: in IE in the IMG with the text together, Line-height does not work   solution: are set to float   16. TD Automatic line wrapping problem problem: Table width fixed, TD Automatic line-wrapping solution: Set Table of the TABLE-LAYOUT:FIXED,TD Word-wrap:break-word   17. After the child container is floating, the parent container extends the problem: After the child container is float, the parent container is not set to a height and the parent container will not be extended to resolve: Just add a clear:both div with the following code:

2. Sub Container adiv>
3. Sub Container bdiv>
4. div>
5. Div>

18. Transparent PNG picture with background color problem: The transparent PNG picture under IE6 will be resolved with a background color: Background-image:url (icon_home.png);/* Other browsers/Background-repeat:no-rep Eat _filter:progid:dximagetransform.microsoft.alphaimageloader (src=http://www.aseoe.com/' icon_home.png '); /* IE6 * * _background-image:none; /* IE6 * *   19. List-style-position default value problem: IE under list-style-position defaults to inside,   Firefox defaults to outside resolution: CSS designated as outside to resolve compatibility issues nbsp List-style-image accurate positioning of the problem: Li before setting the picture, the picture and the following text alignment problem Resolution: 1, the use of background positioning and character indentation Method Background:url () No-repeat left center; text-index:16px; 2, using the relative positioning method Li set List-style:url (); The position:relative;top:-5px of Li's child elements;   21. UL label default value PROBLEM: UL label in FF default is padding value, and in IE only margin have value solution: Define ul{margin:0;padding:0;} Can solve most of the problems   22. IE in the specified height of Li, there is a typographical error: under IE if the height of Li specified may appear typographical dislocation resolution: set Line-height   23. After the UL or Li float, display in the div outside the question: div in the UL or Li set float, all does not solve in the DIV: must after the UL tag add   to close the outer div   24. After the UL float, the margin becomes big problem: After the UL set float, in IE the margin will be big to solve: Set the UL display:inline,li list-style-position:outside   25. LiAfter floating, margin become big problem: Li set float, in IE margin will be big solution: Set Li's Display:inline   26. Nested use of UL, Li problem problem:  ie bug, nested use of UL, Li, the layer of Li set float, the outer Li does not set float, inside the UL top and it outside of Li always have a period of spacing to solve: Set inside the UL zoom:1   27. There is a 3px problem with the bottom of the ie6-7 Li: This bug produces a necessary and sufficient condition that the element of Li is floating and Li sets one of the following CSS attributes: width, height, zoom, padding-top, Padding-bottom, Margin-top  , Margin-bottom. Resolution: 1, Div set Clear:leftboth, when Li can not set the width, height, zoom.   2, Li set Float:left, when Li can set width, height, zoom.   3, Li set Clear:leftboth, when Li can not set the width, height, zoom.   4, Ie6/ie7 this bug can be resolved by setting Vertical-align:topmiddlebottom for the div in Li.   28. IE6 Vertical list gap problem: Li has a and set Display:block, IE6 will appear in the list of gaps resolved: 1, Li Display:inline; 2, Li use float   then clear:both; 3. Add a space 4 to the end of the included text, set width   29. IE6 list Background color failure problem: When the parent element set position:relative, in IE6 the first UL, OL, DL background color failure to resolve: UL, OL, DL are set to position:relative;   30. IE6-7 list Background Color failure 2 problem: Do horizontal navigation bar, the UL set to float and have background color, Li set to float. IE6-7 Background Color Failure resolution: A lot of IE bugs can be triggered layout to solve the UL Add property 1, height:1%; 2, Float:left; 3, Zoom:1;   31. ListCan not wrap the problem: Li set to float, behind the Li followed by the following, can not be wrapped to resolve: 1, for this UL definition of the appropriate width of 2, to include this UL definition of the parent div appropriate width and height.   32. The contents of Li are displayed as ellipses: When the content in Li exceeds the length, it is intended to appear as an ellipsis, which is applicable to Ie6-7-8, opera, Safari browser   FF browsers that do not support resolution: li{width:200px; White-space: nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; Overflow:hidden; }   33. Hover style does not appear after hyperlink access problem: After clicking the hyperlink, the hover, active style does not work: Change the order of CSS attributes: l-v-h-a     34. Problem with disabling Chinese Input method: cannot enter Chinese characters in the input box: only valid in IE series and FF ime-mode:disabled     (but can paste) disable paste: onpaste= "return false"   35 . To remove the scroll bar problem: Hide the scroll bar resolution: 1, only ie6-7 support 2, except ie6-7 does not support Body{overflow:hidden} 3, all browsers Html{overflow:hidden}   36. Let the layer show above flash the problem:   Want to let the content of the layer show on flash Resolution: set the Flash transparent

37. Remove the link dotted border problem: When you click the hyperlink, IE6/7/8 FF will appear dotted border, and opera, Safari does not have dotted border resolution: Ie6/7 set to a {blr:expression (THIS.ONFOCUS=THIS.BL   ur ())} IE8 and FF do not support expression set in IE8, FF: focus {Outline:none;} Problems with CSS filters: CSS filters are only valid in IE, Firefox, Safari (WebKit), opera can only set transparent, they do not support filter filter, can not achieve the effect of the transition between the image switch, can only be set through transparency.  Resolve: Set the transparency-moz-opacity:0.10 in FF; opacity:0.6; In IE only set Filter:alpha (OPACITY=50);  , ie6-7 failure, but also to set 1, zoom:1;   2, width:100%; IE6 Background Flicker Problem: links, buttons with CSS sprites as the background, under the IE6 will have a background picture flashing phenomenon. The reason: IE6 does not cache the background map, each time the hover is triggered will reload the resolution: You can use JavaScript settings IE6 cache these pictures: Document.execcommand ("Backgroundimagecache",   False,true); 40. Problems with duplicate text:

2. div>
3. >
4. ↓ this is the extra pig div>
5. Div>

Resolve: 1, change the structure, do not appear "a container contains 22 structures with a" float "style of child containers. 2, reduce the width of the second container, so that the parent container width minus the second container width of the value is greater than 3 3, remove all comments. 4, revise the annotation the writing.   5, after the second container plus one or more to solve. Position:relative FF, chrome absolute Positioning invalid problem: in IE to the TD set up, and then give it contains a container to use the Position:absolute to locate is valid, but under the FF and Chrome is not allowed.   Solution: Set up TD's Display:block. The question of IE6 absolute positioning:

1.  
3. background:# CCC; " >dovapour{c}{c}{c}{c}{c}{c}div> 
4. Content a>  
5. DIV> 

Resolve: Left position error 1, set zoom:1 trigger layout to the parent layer.  2, to the parent layer set width bottom positioning error 1, to the parent layer set ZOOM:1 trigger layout. 2, set height of 43 to the parent layer. When the child container is wider than the parent container width, content out of question: the width of the child div and the width of the parent div are already defined, in IE6 if the width of the child div is greater than the width of the parent div, the width of the parent Div will be extended, and the width of the parent Div will not expand in other browsers.   The child Div will exceed the parent Div resolution: Set Overflow:hidden, the child div will not exceed the parent div. Question of the div closure of float: for example:< #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > The NOTFLOATC here is not Greek. I hope to continue to translate, but want to row down.    (where the Floata, FLOATB properties have been set to float:left;) This code has no problem with IE, the problem is in other browsers. The reason is that NOTFLOATC is not a float label and the float label must be closed. Solution: In < #div class= "FLOATB" > < #div class= "NOTFLOATC" > plus < #div class= "clear" > this div must pay attention to the position, Also, there must be a nested relationship with two Div siblings with the float property, or an exception will be generated.   and define clear this style as follows:. clear{Clear:both; 45. The Radio box, check box and the following text alignment problem: The Radio box, check box and the following text is not aligned. Resolution:. align{font-size:12px; align input{display:block; float:left; align label{; padding-top:3px; *padding-top:5px;}

Ps:
1, IE6/7 in the use of display:inline/inline-table will automatically change the line to solve: the use of float:left; 2. The width of the Ie6/7 text box is 2px wider than other versions or other browsers.  3, IE6 in a number of tags set float:left/right, you need to set the corresponding width. 4, IE6 to do adaptive height, set Height:auto; Overflow:hidden, setting the "width" of the div resolves the problem. 5, IE6 use a label adaptive width, need to add: float:left/right; not recommended: Display:inline; 6, IE8 label integrity requirements are high, if other browsers display normal, IE8 abnormal situation, to see whether a label is missing start or end. 7, ie6/ie7 in the text padding invalid solution: set overflow:visible; 8, Ie6/ie7 Li does not automatically change the line solution: set white-space:nowrap; 9, label A can not confirm the width, height, set Display:bloack can be.