div + css compatible ie6 ie7 ie8 ie9 and FireFox Chrome and other browsers method

Effect 1.DOCTYPE CSS process
2.FF: div setting margin-left, margin-right to auto has been centered, IE not
3.FF: body setting text-align, div to set margin: auto (mainly margin-left , margin-right) before the middle
4.FF: after setting the padding, div will increase the height and width, but IE does not, it needs to set up more important with a height and width!
5.FF:! important support, IE is ignored , can be used particularly important to set the FF style!
vertical center of problems 6.div: vertical-align: middle; and the line spacing increased as high DIV entire line-height: 200px; text is then inserted, on a vertical center. The disadvantage is that you want to control content do not wrap
7.cursor: pointer cursor can be displayed in IE FF in finger-like, hand only IE can
8.FF: links add borders and background colors, set the display: block, and set float: left to ensure does not wrap. Referring menubar, menubar, and provided to a high degree in order to avoid dislocation of the bottom edge of the display, if provided height, can be inserted in a space in the menubar.
9. BOX model mozilla firefox and IE difference in interpretation lead to inconsistent 2px solution: div {margin:! 30px important ; margin: 28px;} Note that both margin must not write the order reversed, according to Acha to say! this important property IE does not recognize, but other browsers can be identified. In fact, it is interpreted as this IE: div {maring: 30px; margin : 28px} redefined then performed according to the last, it can not just write margin:! XXpx Important;
11.ul default tag is padding in Mozilla value, but only in IE has a value so the first margin defined ul {margin: 0; padding: 0;} will solve most of the problems

Precautions:

1, float the div must be closed.
E.g. :( wherein floatA, floatB attribute has been set to float: left;)

<div the above mentioned id = "floatA"> </ div>
<div the above mentioned id = "floatB"> </ div>
<div the above mentioned id = "NOTfloatC"> </ div>
NOTfloatC here do not want to continue the translation, but to down row.
This code no problem in IE, the problem in FF. The reason is NOTfloatC not float the label, the label must float closed.
in

<div class = "floatB"> </ div>
<div class = "NOTfloatC"> </ div>
coupled between the

<div class = "clear"> </ div>
This div must pay attention to the position statement, must be placed in the most appropriate place, and must have the same level with two div float property can not be nested relationship exists between, or it will cause an exception.
And clear as this style is defined as follows to:
.clear {
clear: both;
}
In addition, in order to automatically adapt the height so that, to add the wrapper inside the overflow: hidden;
when the box float comprising, highly automated adaptation is not available in IE, this time should trigger IE's layout private property (evil IE) with a zoom: 1; can be done, so that to achieve compatibility.
For example, a definition of a wrapper as follows:

.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2, margin doubled problem
set margin float the div settings in ie will double. This is a ie6 there is a bug.
The solution is in the div inside with display: inline;
for example:

Corresponding to css

{#IamFloat
a float: left;
margin: 5px; / * case * IE is understood to 10px /
the display: inline; / * then the IE is understood to 5px * /}

3, on the relationship containers bear
a lot of time, especially in the parallel layout containers, such as two, three float when div, width, it is prone to problems. In IE, the width of the outer layer of the inner layer will be wider div racking. Firework must use Photoshop or amount of pixel-level accuracy.
4, about the height of the problem
if it is dynamically added content, it is best not highly defined. The browser can automatically stretch, but if the content is static, the height of the best will be good. (Sometimes it seems does not automatically distraction down, I do not know how specific matter)
5, the most ruthless means - important;!
If there is no way to solve some of the details, you can use this method .FF for "! Important" will automatic priority resolution, but IE is ignored. follows

.tabd1{
background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/
background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */}

It is noteworthy that, be sure to xxxx! Important phrase is placed on top of one another, have the above mentioned
support IE7.0 there are new issues for CSS. More than a browser, web compatibility even worse, exhausted or are we, in order to solve IE7.0 compatibility issues, and got the following article:

Now I mostly use! Important to hack, ie6 and firefox for testing can be normal, but ie7 on! Important can be interpreted correctly, it can lead to a page not required to display! Search a bit to find a good hack for IE7 way is to use "* + html", now look with IE7 should be no problem.
Now you can write a CSS like this:

#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
*+html #example { color: #999; } /* IE7 */

Then under firefox font color is displayed as # 333, IE6 under font color display is # 666, under IE7 display font color is # 999.

About CSS compatible with each browser is already a common problem, and tutorials on the network everywhere. The following content is not much new, purely personal summary, I hope to have some help for beginners.
A, CSS HACK following two ways to solve almost all of today HACK.

1, !important

With IE7 on! Important support of,! Important method is now only for the HACK IE6. (Note the wording. Remember the position statement in advance.)

2, IE6 / IE77 pair FireFox

* + Html and * html tag is unique to IE, firefox does not support. * + Html but also for IE7 unique label.

Note:
* IE7 + HTML on top of HTML HACK must ensure that the following statement:

<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'　'http://www.w3.org/TR/html4/loose.dtd'>

Second, the float universal closure
on Clear float principle can be found in [How To Clear Floats Without Structural Markup ]
the following code is added Global CSS, the need to add a closed div class = 'clearfix' can be, tested.

.clearfix:after
{
content:'.';
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix
{
display:inline-block;
}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
</style>

Third, other compatible tips
1, after setting padding to the div next FF would lead to increased width and height, but IE does not. (Available! Important to solve)
2, center problems.
1). Vertically. The line-height set to the current . div same height, and then through the vertical-align: middle (. Note that the contents do not wrap)
. 2) the middle level margin: 0 auto; (certainly not universal)
3, for a tag to the content plus the style requires set display: block; (common in navigation label)
. 4, FF and IE differences BOX understanding leads to a difference of 2px there to float a div in ie margin doubled and so on
5, ul tags FF has the following default list . -style best and padding prior notice, in order to avoid unnecessary trouble (common in the navigation tabs and the content list).
6, as the outside wrapper div is not scheduled to die height, the best plus overflow:. hidden in order to achieve a high degree adaptive
7, about the hand cursor cursor:. pointer IEs only applies to the hand..

1 for firefox css styles ie6 ie7 of
now most of them are using! Important to hack, ie6 and firefox for testing can be normal,
but ie7 on! Important can be interpreted correctly, can lead to a page not required to display! Find a needle
on IE7 good hack is to use "* + html", now look with IE7 should be no problem.
Now you can write a CSS like this:

#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE7 */

Then under firefox font color is displayed as # 333, IE6 under font color display is # 666, under IE7 display font color is # 999.

2 css layout problems centered in
major styles are defined as follows:

body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

Description:
First define the TEXT-ALIGN parent element: center; this means that the contents within the parent element centrally; IE for it has been set in this way. But not centered in the mozilla. The solution is to define the time when a child element set plus "MARGIN-RIGHT: auto; MARGIN -LEFT: auto;" It should be noted is that if you want to use this method to make the entire page to be centered, not recommended sets in a dIV, you can turn demolition of multiple div, as long as the definition MARGIN-RIGHT split out in each of the div: auto; MARGIN-LEFT: auto ; on it.

3-box model different interpretations

#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-}

Double floating ie produced from 4

#box {float: left; width: 100px; margin: 0 0 0 100px; // IE occur under such circumstances 200px distance
display: inline; //} Here the floating ignore about elaborate block, inline two characteristic element, block elements are: always start on a new line, height, width, line height, margins can be controlled (block element); Inline element characteristics are: and other elements on the same row, ... uncontrollable (embedded element);
#box {the display: block; // can be modeled as elements embedded block elements display: inline; // achieve the effect of the same row are arranged
diplay: table;

IE min- not recognize this definition, but it is actually the width and height as the normal case have to make min. Such big problem, if only the width and height,
normal browser will not become two values, only if the min-width and min-height, then, IE below did not set equal to the width and height.
For example, to set the background image, the width is more important. To solve this problem, it can be:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

The minimum width of the page 6

min-width is a very handy CSS command, you can specify which elements can not be less than a certain minimum width, so that we can ensure that layout has been correct. IE, but I do not recognize this,
and it is actually the minimum width as to make the width. To make this command can also be used in IE, you can put a div tag placed under the body, and then specify a class for the div:
Then this CSS Design:

#container {min-width: 600px; width: expression (document.body.clientWidth <600 '600px':? 'auto');}
The first min-width is normal; line width of 2 but using Javascript it was only recognize IE, which also makes your HTML document less formal. It is actually achieved by determining the minimum width of Javascript.

7 Clear float

.hackbox {display: table; // table block elements as display objects or} .hackbox {clear: both;}
or added: after (pseudo object), set of content occurs after the object, and usually used in conjunction with content , IE does not support this pseudo object, Ie non-browser support,
it does not affect IE / WIN browser. This is the most troublesome ...... # box: after {content: ; display '.': Block; height: 0; clear: both; visibility: hidden;}

8 DIV 3 produced floating text pixels IE bug

Floating objects left and right using the left margin of the outer patch positioned within the text objects from the left to the right a distance of 3px.

#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{ width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码
<div id='box'> <div id='left'></div> <div id='right'></div></div>

9 attribute selectors (this can not be considered compatible, is hidden in a bug css)

p [id] {} div [ id] {}
the following for IE6.0 and IE6.0 versions are hidden, FF and OPera action
attribute selector and a selector or sub-differentiated, the range selector from the sub-form said narrow the scope attribute selector relatively large, such as p [id], the p tags all have the same type are id.

10 IE hide and seek problems

When the application of complex issues div when there are links to each bar, DIV and other vulnerable this time of hide and seek.
Some of the content does not show up when the mouse to select the region is indeed found in the page content.
Solution: Use the line-height attribute to #layout #layout or fixed high and wide. Page structure as simple as possible.

11 Highly suited

The outer layer is highly suited height adjustment can not be performed automatically when the inner height of the object is changed, particularly when an object using the inner
margin or paddign time.
example:

<div ID = 'Box'>
<P> P content object </ P>
</ div>
the CSS: #box {background-Color: #eee;}
#box P {margin-Top: 20px; margin-bottom : 20px; text-align: center ;}

Solution: P in the object up and down the empty plus 2 div CSS code objects: .1 {height: 0px; overflow: hidden;} or a DIV plus border property.

/ * IE and Firefox compatible encyclopedia of CSS * /
1.DOCTYPE influence CSS processing

2.FF: div setting margin-left, margin-right is already centered auto, IE not

3.FF: When the body set up text-align, div to set margin: auto (mainly margin-left, margin-right) before the middle

4.FF: After setting padding, div height increases and width, but IE will not therefore need to be one more important width and height!

5.FF: Support important, IE is ignored, it can be important especially for the FF setting style!!

Problems of vertically centered 6.div: vertical-align: middle; and the line spacing increased as high DIV entire line-height: 200px; text is then inserted, on a vertical center. The disadvantage is that you want to control content do not wrap

7.cursor: pointer can be displayed cursor pointing finger, hand can only IE IE in the FF

8.FF: Link add borders and background colors, set the display: block, and set float: left to ensure that no line breaks. Referring menubar, menubar, and provided to a high degree in order to avoid dislocation of the bottom edge of the display, if provided height, can be inserted in a space in the menubar.

9. BOX model mozilla firefox and IE difference in interpretation lead to inconsistent 2px solution:
div {margin:! Important 30px; margin: 28px;}
Note that both margin must not write the order reversed, according to Acha to say! this important property IE does not recognize, but other browsers can be identified. In fact, it is interpreted as this IE:
div {Maring: 30px; margin: 28px}
repeat the words defined last performed in accordance with, so not just write margin:! XXpx important;

10.IE5 IE6 and explain the inconsistency BOX
under IE5
div {width: 300px by; margin: 10px 0 0 10px;}
width div will be interpreted as 300px-10px (right padding) -10px (left filled) div width of the final 280px, while the width of the browser IE6 and the other is 300px + 10px (right padding) + 10px (left padding) = 320px calculated. Then we can make the following changes
div {width: 300px important; width / ** /:! 340px; margin: 0 10px 0 10px}
on this / ** / What I do not quite understand, only know that both IE5 and firefox but support for IE6 does not support, if anyone understood it, please let me know, thanks! :)

11.ul default label in Mozilla is padding value, and only in IE has a value so the first margin defined
ul {margin: 0; padding: 0;}
will solve most of the problems

Precautions:

1, float the div must be closed.

E.g. :( wherein floatA, floatB attribute has been set to float: left;)

<#div ID = 'floatA'> </ div #>
<#div ID = 'floatB'> </ div #>
<#div ID = 'NOTfloatC'> </ div #>
NOTfloatC here do not wish to continue the translation but hope down the row.
This code no problem in IE, the problem in FF. The reason is NOTfloatC not float the label, the label must float closed.
in

<#div class = 'floatB'> </ div #>
<#div class = 'NOTfloatC'> </ div #>
between plus
<#div class = 'clear'> </ # div>
This div must Note that the position statement, must be placed in the most appropriate place, and must have the same level with two div float property can not be nested relationship exists between, otherwise it will generate an exception.
And clear as this style is defined as follows to:
.clear {
clear: both;}
In addition, in order to automatically adapt the height so that, to add the wrapper inside the overflow: hidden;
when the box float comprising, highly automated adaptation is not available in IE, this time should trigger IE's layout private property (IE evil ah!) with a zoom: 1; can be done, so that to achieve compatibility.
For example, a definition of a wrapper as follows:
.colwrapper {
overflow: hidden;
Zoom:. 1;
margin: Auto 5px;}

2, margin doubling problem.

Set margin float the div settings in ie will double. This is a ie6 there is a bug.
The solution is in the div inside with display: inline;
for example:

<#div id='imfloat'></#div>

Corresponding to css

{#IamFloat
a float: left;
margin: 5px; / * case * IE is understood to 10px /
the display: inline; / * then the IE is understood to 5px * /}

3, bear relationship between container

In many cases, especially in parallel arrangement within the vessel, for example two, three float when div width is prone to problems. In IE, the width of the outer layer of the inner layer will be wider div racking. Firework must use Photoshop or amount of pixel-level accuracy.

4, the issue of height

If you are dynamically add content, it is best not highly defined. The browser can automatically stretch, but if the content is static, the height of the best will be good. (Sometimes it seems does not automatically distraction down, I do not know how specific matter)

5, the most ruthless means - important!;

If there is no way to solve some of the details, you can use this method for .FF '! Important' priority will be automatically resolved, but IE is ignored as follows.
.Tabd1 {
background: url (/res/images/up/tab1.gif) ! NO-REPEAT Important 0px 0px; / * Style * for the FF /
background: URL (/res/images/up/tab1.gif) NO-REPEAT 1px 0px; / * for IEs Style * /}

div + css compatible (II)

2008 April 2 Wednesday, 10:58 am

DIV + CSS compatible IE6 IE7 Firefox

In differentiating and Firefox IE important is the most commonly used method, there are the following problems for the compatibility of different versions of other methods of different browsers and browsers, such as:! @Import, annotation, attribute selector, sub-object selection voice-family operators and the like, these methods have about the "CSS site layout Record" in the.

The following is a css compatibility IE and Firefox

1.DOCTYPE influence CSS processing

2.FF: div setting margin-left, margin-right is already centered auto, IE not

3.FF: When the body set up text-align, div to set margin: auto (mainly margin-left, margin-right) before the middle

4.FF: After setting padding, div height increases and width, but IE will not therefore need to be one more important width and height!

5.FF: Support important, IE is ignored, it can be important especially for the FF setting style!!

Reproduced in: https: //www.cnblogs.com/Crakme/archive/2012/09/12/2681835.html

div + css compatible ie6 ie7 ie8 ie9 and FireFox Chrome and other browsers method

Guess you like