DIV CSS compatibility solves the common method of Ie6/ie7/ff browser Perfect and

In the site design, should pay attention to CSS style compatible with different browser issues, especially for the full use of the DIV CSS Design of the net, you should pay more attention to the IE6 IE7 ff CSS style compatibility, otherwise, your network chaos may go out don't want to appear effect!

All browsers common
height:100px;

IE6 Dedicated
_height:100px;

IE6 Dedicated
*height:100px;

IE7 Dedicated
*+height:100px;

IE7, FF Common
height:100px!important;


First, CSS HACK
1,!important
With IE7 support for!important, the!important method is now only for IE6 hack. (Note the wording. Remember that the statement location needs to be advanced.)
The following is the referenced content:
<style>
#wrapper
{
Width:100px!important;
width:80px;
}
</style>

2, Ie6/ie7 to Firefox
The following is the referenced content:
*+html and *html is the unique label of IE, Firefox is not supported. And *+html is a special label for IE7.
<style>
#wrapper
{
#wrapper {width:120px;}
*html #wrapper {width:80px;}
*+html #wrapper {width:60px;}
}
</style>

Note:
*+html the hack to IE7 must be guaranteed HTML has the following declaration:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD";
Second, Universal float Close
The principle of clear float can be found in [how to clear floats without Structural Markup]
Add the following code to the global CSS, add class= "to the div that needs to be closed" Clea Rfix "Can, tried.
The following is the referenced content: <style>
. clearfix:after
{
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}
. clearfix
{
Display:inline-block;
}

. clearfix {display:block;}


</style>

Third, other compatibility tips
1, ff setting padding to Div will cause width and height to increase, but IE will not. ( Available!important solution) such as width:115px!important;width:120px;padding:5px;
It is important to note that!important must be in front.
2, centering the problem.
1). Center vertically. Set Line-height to the same height as the current Div, and then through Vertical-align:middle. (Note that the content does not wrap.)
2). Center horizontally. margin:0 Auto;
3, if you need to add style to the contents of the a tag, display:block should be set, (common in Navigation label)
4, the difference between FF and IE on BOX understanding results in 2px difference and set to Floa T's div in IE margin double and so on.
5, UL label under FF The default is List-style and padding. It is best to declare beforehand to avoid unnecessary trouble. (Common in navigation labels and table of contents)
6, as an external wrapper div do not set dead height, it is best to add Overflow:hidden. To achieve a high degree of self-adaptation.
7, about the hand cursor. Cursor:pointer. and hand only applies to IE.
Compatible code: compatible with the most recommended modes.

. Submitbutton {
Float:left;
width:40px;
Height:57px;
Margin-top:24px;
margin-right:12px;
}

*html. Submitbutton {
margin-top:21px;
}

*+html. Submitbutton {
margin-top:21px;
}

What is browser compatible: When we use a different browser (Firefox IE7 IE6) access to the same site, or page, there will be some incompatibility problems, some show normal, some appear abnormal, we write CSS when it is very annoying, just fixed the browser problem , and another browser has a new problem. And compatibility is a way to allow you to write independently in a CSS to support different browser styles. This is a harmonious situation. Oh!

Recently, the compatibility of IE7 browser released by Microsoft has indeed added a heavy burden to some web developers, although IE7 has been standardized, there are many different places with FF, so it is necessary to use IE7 compatibility.
A bit of logical thinking people will know can be used with the compatibility of IE and FF, the following describes three compatible, for example: (For beginners, hehe, the master is here passing it.) ）

Program code

First compatible, IE FF all browsers are public (not really compatible)
height:100px;
A second compatible IE6 dedicated
_height:100px;
A third compatible IE6 IE7 public
*height:100px;

After the introduction of these three compatible, let's look at how to give an attribute definition in a style IE6 IE7 FF dedicated compatibility, see the following code, the order can not be wrong oh:

Program code

height:100px;
*height:120px;
_height:150px;

Let me briefly explain how each browser understands these three properties:

Under FF, the 2nd, 3 properties ff do not know, so it reads height:100px;

Under IE7, the third attribute IE7 does not know, so it reads the 1th, 2 properties, and because the second property overrides the first attribute, so IE7 finally reads the 2nd attribute *height:120px;

Under IE6, three properties IE6 are known, so three properties can be read, and because the third property overrides the first 2 properties, IE6 finally reads the third property.

1 CSS styles for Firefox IE6 IE7
Most are now using!important to hack, for IE6 and Firefox test can display normally,
But IE7 to!important can be correctly explained, will cause the page did not display as required! Find a needle
IE7 good hack Way is to use "*+html", now with IE7 browsing, there should be no problem.
Now write a CSS that can do this:
The following is the referenced content:
#1 {color: #333;}
* HTML #1 {color: #666;}
*+html #1 {color: #999;}

Then under Firefox font color display as #333,ie6 under the font color display as #666,ie7 under the font color display as #999.
2 centering issues in CSS layouts
The main style definitions are as follows:
body {text-align:center;}
#center {Margin-right:auto; Margin-left:auto; }
Description
The text-align:center is defined first in the parent element, which means that the content within the parent element is centered, and the setting for IE is already available.
But it can't be centered in Mozilla. The solution is to add "Margin-right:auto" when the child element is defined; Margin-left:auto; ”
It is necessary to note that if you want to use this method to center the entire page, it is recommended that you do not put in a div, you can sequentially split a number of Div,
Just define the Margin-right:auto in each of the split div; Margin-left:auto; You can do it.
3 box models different interpretations
#box {width:600px;//for ie6.0-width:500px;//for ff+ie6.0}
#box {width:600px!important//for ff width:600px;//for ff+ie6.0 width:500px;//for ie6.0-}
4 The double distance generated by the floating IE
#box {float:left; width:100px; margin:0 0 0 100px; In this case, IE will produce 200px distance display:inline; Make floating Ignore}
Here Block,inline two elements, the block element is characterized by: always start on the new line, height, width, row height, the margin can be controlled (block elements), the characteristics of the inline element is: and other elements on the same line,... Uncontrollable (inline element);
#box {display:block;//can simulate a block element display:inline for inline elements;//Achieve the effect of the same row arrangement diplay:table;
IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This is a big problem, if you only use width and height,
In the normal browser these two values will not change, if only with min-width and min-height words, ie below is basically not set width and height.
For example, to set the background image, this width is more important. To solve this problem, you can:
#box {width:80px; height:35px;} Html>body #box {width:auto; height:auto; min-width:80px; min-height:35px;}
6 minimum width of the page
Min-width is a handy CSS command that allows you to specify that the element should be minimal or less than a certain width, so that the layout is always correct. But IE does not recognize this,
And it actually puts width as the minimum width. To make this command available on IE, put a <div> into the <body> tab and specify a class for the DIV:
Then the CSS is designed like this:
#container {min-width:600px; Width:expression_r_r (Document.body.clientWidth < 600?) "600px": "Auto");}
The first min-width is normal, but the width of line 2nd uses JavaScript, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by JavaScript's judgment.
7 Clear Float
. hackbox{display:table;//Display the object as a block-element-level table} or. hackbox{Clear:both;}
or join: After (pseudo-object), set what happens after the object, usually in conjunction with content, IE does not support this pseudo-object, non-IE browser support,
So it doesn't affect the Ie/win browser. This is the most troublesome of ... #box: after{content: "."; display:block; height:0; clear:both; visibility:hidden;}
8 div Floating IE text generates 3 pixel bug
The left object floats, the right side is positioned with the left margin of the outer patch, and the text within the right object is spaced 3px away from the left.
#box {float:left; width:800px;} #left {float:left; width:50%;} #right {width:50%;} *html #left {margin-right:-3px;//This sentence is the key}
HTML code <div id= "box" > <div id= "left" ></div> <div id= ' right ' ></div></div>
9 attribute Selector (this is not compatible, is a bug to hide CSS)
p[id]{}div[id]{}
This is hidden for IE6.0 and IE6.0 versions, and the FF and opera functions
There is a difference between the property selector and the child selector, the range of the child selector is reduced in form, the range of the property selector is larger, such as P[id], and all P tags have the same type of ID.
Ten IE hide and seek problems
When the div application is complex, there are some links in each column, and the div is prone to hide-and-seek problems.
Some content does not show up when the mouse selects this area is found content is indeed on the page.
WORKAROUND: Use Line-height attribute for #layout or use fixed height and width for #layout. The page structure is as simple as possible.
11 Height not adapted

Height is not adjusted when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner layer object uses
Margin or paddign. Cases:

<div id= "box" >
Content in the <p>p object </p>
</div>

Css:

#box {background-color: #eee;}
#box p {margin-top:20px;margin-bottom:20px; text-align:center;}

Workaround: Add 2 empty div object CSS code to the P object:. 1{height:0px;overflow:hidden;} Or add the border attribute to the Div.

Block IE browser (ie not shown)
*:lang (ZH) select {font:12px!important;}
select:empty {font:12px!important;}
Here select is the selector and is replaced as appropriate. The second sentence is unique to the Safari browser on your Mac.

IE7 Identification only
*+html {...}
This compatibility can be used when faced with the need to do a style only for IE7.

IE6 and IE6 following identification
* HTML {...}
This place has to pay special attention to the fact that many landlords have written the compatibility of IE6 is actually ie5.x also can recognize this compatibility. Other browsers are not recognized.
HTML >body Select {...}
This sentence has the same effect as the previous sentence.

Only IE6 not recognized
Select {Display:none;}
The main point here is to separate a property and value from the CSS annotation, which flows in front of the colon.

Only IE6 and IE5 are not recognized
Select {Display:none;}
The difference between this and the above sentence is that there is a CSS comment between the selector and the curly brace.

Only IE5 not recognized
Select {Display:none;}
This sentence removes the comment from the attribute area in the previous sentence. Only IE5 does not recognize

Box Model Solving method
SELCT {width:ie5.x width; voice-family: ""} ""; Voice-family:inherit; Width: correct widths;}
The cleaning method of the box model is not handled by!important. This should be clear.

Clear floating
Select:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}
In Firefox, when the children are floating, then the height of the parent can not completely wrap the entire child, then use this clear floating compatibility to do a definition of the parent, then you can solve the problem.

Truncation character ellipsis
Select {-o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden;}
This is the more out of the length of the self-cut off the portion of the text, and end with an ellipsis, a very good technology. Only Firefox does not support it at this time.

Only Opera recognizes
@media all and (min-width:0px) {select {...}}
Make a separate setting for Opera browser.

The above are written in CSS some compatibility, it is recommended to follow the correct tag nesting (div ul li nested structure relationship), so that you can reduce the use of compatible frequency, do not enter the misunderstanding, not a page requires a lot of compatibility to maintain multi-browser compatibility, In many cases, perhaps a compatibility does not also allow the browser to work very well, these are used to solve the local compatibility problem, if you want to separate the compatibility of the content, may wish to try the following several filters. Some of these filters are written in CSS to import special styles through filters, as well as the use of conditions to link or import the required patch styles in HTML.

ie5.x filter, only ie5.x visible
@media TTY {
I{content: "";}} @import ' Ie5win.css ';

Ie5/mac filters, generally no need

The following is the conditional comment of IE, the individual feel that using conditional comments to call the corresponding compatibility is a more perfect multi-browser compatible solution. The need to be compatible with the place in a file, when the browser version can be used to invoke the compatible style, which is not only very convenient to use, and for the production of this CSS itself, can be more strictly observed whether it is necessary to use compatibility, in many cases, When I myself write CSS if all the code including compatibility are written to a CSS file when the time will be very casual, how to be compatible with how to be compatible, and you write independently, you will not consciously consider whether it is necessary to be compatible, is first compatible with CSS? Or do you want to adjust the contents of the main CSS to as much as possible without the need for compatibility? Do you have a sense of accomplishment when you make a lot of browsers very good and obedient with very little compatibility? You know how to choose it ~ hehe

IE if conditions are compatible with their own flexible use see this IE conditional comment
Only IE
All IE is recognizable

Only IE5.0 can identify
Only IE 5.0+
IE5.0 shifting IE5.5 can be identified

Only IE6 recognizable
Only IE 7/-
IE6 and ie5.x below IE6 are recognizable
Only IE 7/-
Only IE7 recognizable

CSS There are many things do not follow certain rules, it will make you very upset, although you can through a lot of compatibility, a lot of!important to control it, but you will find that in the long-range you will be very reluctant to look at many excellent sites, their CSS let Ie6,ie7,firefox, Even Safari,opera run up perfect is not envy? And their seemingly complex template under the use of less compatible. In fact, you need to know that IE and Firefox is not not so discordant, we find a certain way, is fully able to let them coexist harmoniously. Don't you think found a compatible approach, you have mastered everything, we are not compatible slaves.

Div ul Li's nesting order

Only one rule is spoken today. is the triangular relationship of <div><ul><li>. My experience is <div> in the outermost, inside is <ul>, and then <li>, and of course <li> inside can be nested <div> what, but do not recommend nesting a lot of things. When you meet such rules, those unlucky, disobedient gaps will not appear in the inside, when you are only <div> inside put <li>, and without <ul>, you will find that your gap is very difficult to control, under normal circumstances, IE6 and IE7 will be more spaced out of thin air. But in a lot of cases you came to the next line, the gap is gone, but the front of the content is empty a large piece, this situation although you can change the margin of IE, and then adjust the padding in Firefox, so that the two show the effect is very similar, but you have to the CSS will become smelly long, You have to think more about the possible remedies for this problem, although you know that it's compatible with them, but you're going to get bored.

Specific nested notation

Follow the nested way above,<div><ul><li></li></ul></div> and then inside the CSS to tell ul {margin:0px; Padding:0px;list-style:none;}, where List-style:none is a marker that does not allow the <li> tag to display the dots or numbers in the front, because IE and Firefox show a different default effect. So do not need to do any hands and feet, your IE6, and IE7, Firefox display of Things (outer space, spacing, height, width) Almost no difference, perhaps careful you will be in a moment to find: two pixels difference, but that is very perfect, You do not need to adjust the large-sized CSS to control their display, you are willing, you can only be compatible with one or two places, and usually this compatibility can adapt to a variety of places, do not need you to repeat in different places to debug different compatibility methods

DIV CSS Compatibility Resolution IE6/IE7/FF Browser Universal Method Perfect and (GO)