CSS compatibility issues and workarounds

1. Default internal and external margins are different: the default internal and external margins for each browser are resolved differently: *{margin:0;padding:0;} 2. Problem with horizontal centering: Set Text-align:center ie6-7 text centered, nested block elements will also center FF/OPERA/SAFARI/IE8 text will be centered, nested blocks will not be centered: block element settings 1, Margin-left:auto; Margin-right:auto2, margin:0Auto;3.

1. <div align= "center">div>

3. Vertical centering problem: In the browser you want to center vertically, set vertical-align:middle; does not work. For example: IE6 text and text input boxes are not aligned, you need to set Vertical-align:middle, but the contents of the text box will not be centered vertically: to set a container with its height of the same high line-height: 4 as the height of the container. On the question of 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. If the height is set and the content is too high, the IE6 will automatically increase the height and the other browsers will exceedBorderResolution: 1. Set overflow:hidden;2. Height self-increment height:auto!important;height:100px; 5. IE6 Default div height problem: ie6 The default div height is the height of a font display, where the height of the div under IE6 is greater than or equal to the height of one word, so a container with a height of 1px is defined under IE6, displaying a font height resolution: 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 width. WORKAROUND: Use IE6 not supported, but the rest of the browsers support the properties!important. Set property min-height:200px; Heightauto!important; height:200px; 7. Problem with TD Height: TD in TableThe width does not contain the width of the border, but the height of the TD in Oprea and FF contains the height of the borderFIX: Set line-height and height as well. In IE if there is no content in TD, then border will not display 8. div nested p, blank line problem appears: text in Div, FF, Oprea, Chrome:top, and bottom all have blank lines, but no blank lines appear under IE. FIX: Set P's margin:0px, then set Div's padding-top and Padding-bottom 9. Ie6-7 picture below There is a problem with the gap: when the block element contains a picture, there is a gap resolution in the IE6-7:1, in the source code to let

And on the same line

2. Convert the picture to block-level object display:Block;3, set the vertical alignment of the picture vertical-align:top/middle/bottom4, change the parent object's properties, if the parent object's width, high fixed, the picture size with the parent object, then you can set the parent element: Overflow:hidden; 5, set the floating property of the picture Float:left; IE6 double margin Problem: a problem with double margin when setting float in IE6 and setting margin at the same time float:left;width:100px;margin:0 100px; Solution: Set Display:inline; IE6 Weidth is an odd number, the right side of the problem is 1px: The parent element uses relative positioning, andwhen the width is set to odd, the child element is absolutely positioned, and the right side of the IE6 appears with a 1-pixelResolution: Change the odd value of the width to even 12. IE6 two layers between 3px problem: The left layer is floating, the right does not use floating, then in the IE6 between the two layers will produce 3 pixels between the spacing resolved: 1, the right layer is also used floating FLOAT2, the left layer to add attributes margin-right:-3px; IE6 the problem with absolute positioning of child elements: When a parent element uses padding, the child element uses an absolutepositioning, not precise positioningResolution: Set _left:-20px in child elements; _top:-1px;  14. Display hand type Cursor:hand problem: IE6/7/8, opera are supported but Safari, FF does not support the resolution: written cursor:pointer; (All browsers can recognize) 15. Ie6-7 line-height failure problem: in IE, when IMG and text are put together, Line-height does not work: all set to float 16. TD Auto-wrap problem: Tablefixed width, TD automatic line wrappingFIX: Set table-for tableLayout:fixed,td's Word-wrap:break-word17. Child container floating, parent container extension problem: After the child containers are float, the parent container does not set the height, the parent container will not be extended to resolve: Just add a clear:both div, the code is as follows:

2. <div style="border:1px solid #333; width:204px">
4. <div style="width:100px;border:1px solid #333; Float:left; "> Sub-container adiv>
6. <div style="width:100px;border:1px solid #333; Float:left; " > Sub Container bdiv>
8. <div style="Clear:both">div>
10. div>

18. Transparent PNG picture with background color problem: The transparent PNG image under IE6 will be resolved with a background color: Background-image:url (icon_home.png);/* Other browsers */background-repeat: No-repeat;_filter:progid:dximagetransform.microsoft.alphaimageloader (src= ' icon_home.png '); /* IE6 */_background-image:none; /* IE6 */19. List-style-position default value problem: IE under list-style-position default is inside, Firefox default for outside resolution:The compatibility issue can be resolved by specifying outside in CSSlist-.Style-image Accurate positioning of the problemQuestion: Li before setting the picture, the picture and the text after the alignment problem Resolution: 1, the use of background positioning and character indentation Method Background:url () No-repeat left center; TEXT-INDEX:16PX;2, Adopt relativePositioning MethodLi set List-style:url (); position:relative;top:-5px of Li's child elements; The problem with the default value of UL Tags: ul tags in the FF default is padding value, and in IE only margin has value resolved: Define ul{margin:0;padding:0;} will be able to solve most of the problem 22. In IE, when Li specifies a height, there is a typographical error problem: Under IE, if you specify a height for Li may appear layout dislocation resolution: Set Line-height 23. After the UL or Li floats, displayed in the div outside the problem: div in the UL or Li set float, is not resolved in the div: must be added after the UL tag to close the outer div 24. After the UL float, the margin becomes bigger problem: After the UL set float, in IE the margin will become bigger solves: set UL's Display:inline,li list-Style-position:outsideAfter Li Floats, the margin becomes larger: After Li sets the float, the margin in IE will be resolved: Set Li's Display:inline 26. Nested use of UL, Li problem: IE bug, nested use of UL, Li, the inner Li set float, the outer Li does not set float, the inside of the UL top and its outside Li always have a gap resolution: Set the inside of the UL Zoom:1 27. Ie6-7 Li Bottom has 3px problem: the necessary and sufficient condition of this bug is that Li's child element floats and Li sets one of the following CSS properties: width, height, zoom, padding-top, Padding-bottom, Margin-top, Margin-bottom. Resolution: 1, Div set Clear:left|both, then Li can not set width, height, zoom. 2, Li set float:left, then Li can set width, height, zoom. 3, Li set Clear:left|both, then Li can not set width, height, zoom. 4, Ie6/ie7 This bug can be solved by setting Vertical-align:top|middle|bottom to the div in Li. IE6. Problem with vertical list gap: Li has a and set display:block, there will be gaps between the lists in the IE6Resolution: 1, Li add display:inline;2, Li use float then clear:both;3, add a space to the end of the contained text 4, set width 29. IE6 list Background color failure problem: When the parent element is set position:relative, when the first UL, OL, DL background color expires in IE6 resolution: UL, OL, DL are set to position:relative; Ie6-7 list Background Color invalidation problem 2 problem: When you do a horizontal navigation bar, UL is set to float and has a background color, and Li is set to float. IE6-7 Background Color failure resolution: Many IE bugs can be triggered by thelayout To resolve UL Add Properties1, Height:1%;2, float:left;3, zoom:1; 31. The list cannot be wrapped problem: Li is set to float, the following Li immediately followed, can not wrap the solution: 1, for this UL definition of the appropriate width and height 2, to include this UL's parent div defines the appropriate width. Content in Li displays the question in ellipses: when the content in Li exceeds the length, it is intended to be displayed as an ellipsis, this method is suitable for ie6-7-8, opera, and Safari browser FF browsers do not support the resolution: li{width:200px; White-space:nowrap ; text-overflow:ellipsis; -o-text-overflow:ellipsis; Overflow:hidden; } 33. Problem with hover style not appearing after hyperlink access: After clicking the hyperlink, the hover, active style has no effect: change the order of CSS properties: L-v-h-a 34. Disable Chinese Input method problem: Cannot enter the Chinese character resolution in the input box: only in IE series and FF effective ime-mode:disabled (but can paste) disable paste: onpaste= "return false" 35. Problem with removing scrollbars: Hide scroll bar Resolution: 1, only ie6-7 support 2, except ie6-7 does not support body{overflow:hidden}3, all browsersHtml{overflow:hidden}36. Let the layer display on the flash problem: Want to let the content of the layer appear on Flash FIX: set Flash to Transparent

1. <param name="wmode" value="Transparent" />
2. <param name="wmode" value="opaque"/>

37. Remove the link dashed border problem: When you click the hyperlink, the IE6/7/8 FF will appear dashedborders, while opera, Safari does not have a dashed borderResolution: Ie6/7 set to a {blr:expression (This.onfocus=this.blur ())} IE8 and FF do not support expression set in IE8, FF: focus {Outline:none; } 38. 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 image switch intermediate transformation, only throughThe opacity to set.  Workaround: Set transparency-moz-opacity:0.10 in FF; Only filter is set in Opacity:0.6;ie:Alpha (OPACITY=50), ie6-7 fails, also set1, Zoom:1; 2, width:100%; IE6 background Flashing problem: links, buttons with CSS sprites as the background, under the IE6 will be a background image flicker phenomenon. The reason is: IE6 does not cache the background map, each time the trigger hover will reload the resolution: You can use JavaScript settings IE6 cache these pictures: Document.execcommand ("Backgroundimagecache", False,true); 40. Problems with repeating text:

2. <div style="width:400px">
4. <div style="Float:left">div>
6. >
8. <div style="float:right;width:400px">↓ that's the extra pig div>
10. div>

Resolution: 1, change the structure, does not appear "a container contains 22" float "style of the sub-container" structure. 2, reduce the second containerwidth minus the width of the second container width of the parent container is greater than 33. Remove all comments. 4. Correct the wording of the annotation. 5, add one or more after the second container to solve. A. FF, chrome absolute Positioning invalid problem: In IE to set the TD Position:relative, and then it contains a container to use Position:absolute to locate is valid, but under the FF and Chrome can not. WORKAROUND: Set TD's Display:block. IE6 problem with absolute positioning:

2. <div style="position:relative;border:1px solid orange;text-align:center;" >
4. <div style= "position:absolute;top:0;left:0;
6. Background: #CCC; " >dovapour{c}{c}{c}{c}{c}{c}div>
8. <a href="#" title="vapour blog"> Content a>
10. div>

FIX: Left location error problem 1, set zoom:1 trigger layout for parent layer. 2. Set width bottom for parent layerPositioning Error Issues1. Set Zoom:1 trigger for parent layerlayout. 2. Set a height of 43 for the parent layer. When the child container width is greater than the parent container width, the content is out of question: Sub DivWidth and the width of the parent div are defined, in IE6 if the width of its child div is greater than the width of the parent div, the width of the parent Div will be expanded, and the width of the parent Div will not expand in other browsers, and the child Div will exceed the parent DivWorkaround: Set Overflow:hidden, the child div will not exceed the parent div. The question of the div closure of float: for example:< #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > The NOTFLOATC here do not want to continue panning, but want to go down the line.   (where the properties of Floata and FLOATB have been set to float:left;) This code is no problem in IE, the problem is in other browsers. The reason is that NOTFLOATC is not a float label and the float label must be closed. Resolution: In < #div class= "FLOATB" > < #div class= "NOTFLOATC" > Add < #div class= "clear" > this div must pay attention to the location, 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;} 45. The Radio box, check box and the following text alignment problem: The Radio box, check box and the following text is not aligned. FIX:. align{font-size:12px;}. Align input{display:block; float:left;}. Align label{display: block; float:left; padding-top:3px; *padding-top:5px;}

Ps:
1, IE6/7 in the use of display:inline/inline-table will be automatically wrapped to solve: the use of float:left;2, Ie6/7 text box width than other versions or other browsers to be wider 2px.3, IE6 you need to set the corresponding width when setting float:left/right for multiple labels. 4, IE6 do self-adapting height, set height:when auto; Overflow:hidden is invalid, setting the width of the div resolves the problem. 5, IE6 use a label adaptive width, need to add: float:left/right; Deprecated: display:inline;6, IE8 the integrity of the label is very high, if other browsers display normal, IE8 abnormal situation, See if a label is missing a start or end. 7, ie6/ie7 in the text in the padding invalid solution: Set overflow:visible;8, Ie6/ie7 solution to Li does not wrap: set White-space:nowrap ; 9, label A cannot confirmwidth, height, set display:bloack.

CSS compatibility issues and workarounds