Compatible to solve even look

1. Default internal and external margins are different
Problem:
The default internal and external margins for each browser are different
Solve:
*{margin:0;padding:0;}

2. The problem of horizontal centering
Problem:
Set Text-align:center
Ie6-7 text centered, nested block elements are also centered
Ff/opera/safari/ie8 text is centered and nested blocks are not centered
Solve:
Block element settings
1, Margin-left:auto;margin-right:auto
2, margin:0 Auto;
3, <div align= "center" ></div>

3. The problem of 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 vertically centered
Solve:
Set a container with the same height as its high
Line-height: Same as the height of the container

4. On the question of height
Problem:
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 height will be increased automatically under IE6, and the other browsers will exceed the border.
Solve:
1. Set Overflow:hidden;
2. Highly self-increasing height:auto!important;height:100px;

5. IE6 the default div height
Problem:
IE6 the default div height is the height of a font display, 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 the height of a font
Solve:
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
Problem:
IE6 does not support Min-height, Min-width properties, the default height is the minimum height, and width is the minimum width.
Solve:
Use a property!important that is not supported by IE6 but supported by the remaining browsers.
Set property min-height:200px; Height:auto!important; height:200px;

7. TD Height Problem
Problem:
The width of the TD in the table does not contain the width of the border, but the height of the TD in Oprea and FF contains the height of the border
Solve:
Set line-height and height as well. In IE, if there is no content in TD, then border will not display

8. When Div nested p, a blank line appears
Problem:
Blank lines appear in div <p> text </p>,ff, Oprea, Chrome:top, and bottom, but no blank lines appear under IE.
Solve:
Set P's margin:0px, then set Div's padding-top and padding-bottom

9. Ie6-7 There is a gap problem under the picture
Problem: When the
block element contains a picture, there will be a gap in the picture under the Ie6-7
Resolution:   
1, let </div> and on the same line
2, convert the picture to a block-level object Display:block;
3, set the vertical alignment of the picture   Vertical-align:top/middle/bottom
4, 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 properties of the picture   float:left;

Ten. IE6 double margin Problem
Problem:
Double margin issues when setting a float in IE6 while setting margin
Example float:left;width:100px;margin:0 100px;
Solve:
Set Display:inline;

IE6 weidth for Odd, 1px more on the right
Problem:
When the parent element is relatively positioned and the width is set to an odd number, the child element is absolutely positioned, and the right side of the IE6 appears with a 1 pixel
Solve:
Change the odd value of the width to an even number

3px problem between two layers of IE6
Problem:
The left layer is floating, and the right side is not floating, which creates a 3-pixel gap between the two layers in the IE6.
Solve:
1, the right layer also uses floating float
2, the left layer to add attribute margin-right:-3px;

The problem of absolute positioning of IE6 sub-elements
Problem:
When a parent element uses padding, the child element uses absolute positioning and cannot be positioned precisely
Solve:
Set the _left:-20px in the child element; _top:-1px;

14. Display Hand Type Cursor:hand
Problem:
IE6/7/8, opera are supported but Safari, FF does not support
Solve:
Written cursor:pointer; (All browsers can recognize)

Ie6-7 line-height Failure problem
Problem:
Line-height does not work when IMG is placed with text in IE
Solve:
are set to float

TD Automatic line wrapping problem
Problem:
Table width fixed, TD Automatic line wrapping
Solve:
Set the Word-wrap:break-word of TABLE-LAYOUT:FIXED,TD for table

17. Parent container extension issue after a child container floats
Problem:
After a child container is float, the parent container does not have a height set, and the parent container will not expand
Solve:
Just add a clear:both div with the following code:
<div style= "border:1px solid #333; width:204px" >
<div style= "width:100px;border:1px solid #333; Float:left; "> Sub-container a</div>
<div style= "width:100px;border:1px solid #333; Float:left; " > Sub-container b</div>
<div style= "Clear:both" ></div>
</div>

18. Transparent PNG image with background color
Problem:
A transparent PNG image with a background color under the IE6
Solve:
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 */

List-style-position Default Value Issues
Problem:
IE under list-style-position default is inside, Firefox defaults to outside
Solve:
The compatibility issue can be resolved by specifying outside in CSS

List-style-image accurate positioning of the problem
Problem:
When you set a picture in front of Li, the picture aligns with the text after it
Solve:
1, the use of background positioning and character indentation method
Background:url () No-repeat left center; text-index:16px;
2, the use of relative positioning method
Li set List-style:url ();
Li's child element position:relative;top:-5px;

The issue of the UL label default value
Problem:
The UL tag has padding value in FF, and only margin in IE is value
Solve:
Define ul{margin:0;padding:0;} Will solve most of the problems.

When Li specifies a height in IE, typographical errors occur.
Problem:
In IE, if you specify a height for Li, there may be typographical dislocation
Solve:
Set Line-height

When the UL or Li floats, it appears outside the DIV
Problem:
The div is not in the DIV after the UL or Li set float
Solve:
Must be added <div style= "Clear:both" ></div> to close the outer div after the UL tag

After the UL float, the margin becomes larger.
Problem:
After the UL set float, the margin in IE will become larger
Solve:
Set UL's Display:inline,li list-style-position:outside

When Li Floats, the margin becomes larger.
Problem:
When Li sets float, the margin in IE will become larger
Solve:
Set the display:inline of Li

26. Nested use of UL, Li problems
Problem:
IE bug, nested use of UL, Li, the inside of Li set float, the outer Li does not set float, the top of the UL and its outside Li always have a gap between
Solve:
Set the inside of the UL zoom:1

3px on the bottom of ie6-7 Li
Problem:
The necessary and sufficient condition for this bug is that Li's child element floats and that Li sets one of the following CSS properties: width, height, zoom, padding-top, Padding-bottom, Margin-top, Margin-bottom.
Solve:
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. Vertical list Gap problem
Problem:
There is a gap between the list in IE6 when there is a in Li and the Display:block is set
Solve:
1, Li in Add display:inline;
2, Li uses float and then clear:both;
3. Add a space to the end of the contained text
4. Set width

IE6 list background Color invalidation problem
Problem:
The background color of the first UL, OL, DL in IE6 fails when the parent element is set to position:relative;
Solve:
UL, OL, DL are set to position:relative;

Ie6-7 list Background color invalidation problem 2
Problem:
When doing the horizontal navigation bar, the UL is set to float and has a background color, and Li is set to float. IE6-7 Background color failure
Solve:
Many IE bugs can be triggered by the layout to solve the UL add properties
1, height:1%;
2, Float:left;
3, Zoom:1;

31. List does not wrap the issue
Problem:
Li is set to float, followed by Li followed, cannot be wrapped
Solve:
1, for this UL definition suitable width high
2. Define the appropriate width height for the parent div containing this ul.

Content in Li is displayed as ellipses
Problem:
When the content in Li exceeds the length, you want to display it as an ellipsis, this method works for Ie6-7-8, opera, Safari browser
FF Browser does not support
Solve:
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:
Hover, active style has no effect after clicking Hyperlink
Solve:
Changing the ordering of CSS properties: l-v-h-a

34. Problems with Chinese Input method disabled
Problem:
You cannot enter Chinese characters in the input box
Solve:
Valid only in the IE series and FF
Ime-mode:disabled (but can be pasted)
To disable pasting:
Onpaste= "return False"

35. Remove the scroll bar problem
Problem:
Hide scroll bar
Solve:
1, only ie6-7 support <body scroll= "No" >
2, except ie6-7 does not support Body{overflow:hidden}
3. All Browsers Html{overflow:hidden}

36. Let the layer appear above flash
Problem:
Want the content of the layer to appear on flash
Solve:
Set Flash to Transparent
1, <param name= "wmode" value= "Transparent"/>
2, <param name= "wmode" value= "opaque"/>

37. Remove the link dashed border problem
Problem:
When you click the hyperlink, a dashed border appears on the Ie6/7/8 FF, and Opera, Safari has no dashed border
Solve:
Set to a {blr:expression (This.onfocus=this.blur ())} in Ie6/7
IE8 and FF do not support expression in IE8, FF set to: Focus {outline:none;}

Problems with CSS Filters
Problem:
CSS filters only work in IE, Firefox, Safari (WebKit), opera can only be set transparent, they do not support filter filter, can not achieve the effect of the image switch intermediate transformation, can only be set through transparency.
Solve:
Set the transparency-moz-opacity:0.10 in FF; opacity:0.6;
Only set Filter:alpha (opacity=50) in IE; Ie6-7 fails, you also set the
1, Zoom:1; 2, width:100%;

IE6 Background Flashing issues
Problem:
Links, buttons with CSS sprites as the background, under the IE6 there will be a background image flickering phenomenon. The reason is that IE6 does not cache the background, and reloads every time the hover is triggered.
Solve:
You can cache these images with JavaScript settings IE6:
Document.execcommand ("Backgroundimagecache", false,true);

40. Problems with repeating text
Problem:
<div style= "width:400px" >
<div style= "Float:left" ></div>
<!–_–>
<div style= "float:right;width:400px" >↓ that's the extra pig. </div>
</div>
Solve:
1, change the structure, does not appear "a container contains 22" float "style of the sub-container" structure.
2. Reduce the width of the second container so that the value of the parent container width minus the second container width is greater than 3
3. Remove all comments.
4. Correct the wording of the annotation. <!--[if! Ie]> here is the comment content <! [endif]-->
5, after the second container plus one or more <div style= "clear" ></div> to solve.

. FF, chrome absolute Positioning Invalid
problem:
in IE to set the TD Position:relative, and then give it contains a container to use Position:absolute to locate is valid, But under FF and Chrome, it's not possible.
FIX:
set TD's Display:block.
 
42. IE6 problem with absolute positioning
Problem:
<div style= "position:relative;border:1px solid orange;text-align:center;"
<div style= "position:absolute;top:0;left:0;
Background: #CCC; " >dovapour</div>
<a href= "#" title= "vapour Blog" > content </a>
</div>
Fix:
Left positioning error
1, set zoom:1 to the parent layer to trigger layout. &NBSP,
2, set width
  for the parent layer,
Bottom positioning error
1, set zoom:1 trigger layout for the parent layer. &NBSP,
2, Height
  for the parent,
43. When the child container width is greater than the parent container width, the content is out of
question: the width of the
Sub-div and the width of the parent div are already 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 Div
FIX:
Set Overflow:hidden, The child div will not exceed the parent div.

The question of the div closure of a. float
Problem:
For example:< #div id= "Floata" >< #div id= "FLOATB" >< #div id= "NOTFLOATC" > here the NOTFLOATC does not want to continue panning, but wants 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 other browsers. The reason is that NOTFLOATC is not a float label and the float label must be closed.
Solve:
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;}

45. The Radio box, check box and the following text are not aligned
Problem:
The Radio box, check box, and subsequent text are not aligned.
Solve:
. align{font-size:12px;}
. align input{display:block; float:left;}
. align label{display:block; float:left; padding-top:3px; *padding-top:5px;}

Compatible to solve even look