DIV+CSS IE6/IE7/IE8/FF Compatibility issues Summary

1.IE8 compatibility issues, this best deal, converted into IE7 compatible can be. Add the following piece of code to the head, and then as long as it is compatible under IE7, IE8 below is also compatible
<meta http-equiv= "x-ua-compatible" content= "ie=7"/>
2.flaot floating caused IE6 double margin problem, this is the most common, but also best to deal with,!important solve, such as
margin-left:10px!important;
margin-left:5px;
+height:120px;
5. Sometimes, in the layout of the time, found that there is a div floating, the next div is to be shown below, the results ran above, the situation is generally below the FF will appear, the solution is to clear the floating, in the set of the div under the float plus a Div, CSS surface write a clear:both; <div style= "float:left;height:100px; width:500px; " >
<div style= "Clear:both;" >
<div style= "height:100px; width=300px ">
6. Then the center problem, the problem in the novice body a lot, the main reason is that the box model is not understanding, did not memorize the box model, if found that your page is not in the Bureau, I now know, there are several reasons: 1. One is no box, that is, a large div after the body of all the div to put up the one, you did not write. 2. You wrote it, but the width is useless. Absolute width: But with a relative width, want the bureau, must use absolute width. -
7. Extension: If I want to design at the time, achieve ie6,ie7,ff under three different effects, such as IE6 under the background red, IE7 under the blue FF Green, here, I have tried, can, with a compatible method (note the order, you can understand it well). 7 l& T-o7 k-a1 I
background:red;
+background:blue!important;
+background:green;

DIV css Design IE6, IE7, FF compatibility with the characteristics of the Web site design, should pay attention to CSS styles compatible with different browser issues, especially for the full use of the div CSS Design network, you should pay more attention to IE6 IE7 FF CSS style compatibility, otherwise, Your Internet mess may go out of the effect of not wanting to appear!
All browsers universal height:100px;
IE6 Special _height:100px;
IE6 Special *height:100px;
IE7 Special *+height:100px;
IE7, FF shared with height:100px!important;
One, CSS compatible
The following two methods can solve almost all of today's compatibility.
1,!important (not very recommended, with one of the following feel safest)
With IE7 support for!important, the!important method is now only for IE6 compatibility. (Note the wording. Remember that the statement location needs to be advanced.)
Code:
<style>
#wrapper {
Width:100px!important; /* IE7+FF */
width:80px; /* IE6 */
}
</style>
2, ie6/ie77 to Firefox <from CSS style for Firefox IE6 IE7 >
*+html and *html is the unique label of IE, Firefox is not supported. And *+html is a special label for IE7.
Code:
<style>
#wrapper {width:120px;}/* FireFox */
*html #wrapper {width:80px;}/* IE6 fixed */
*+html #wrapper {width:60px;}/* IE7 fixed, note order */
</style>
Attention:
*+html compatibility with IE7 must ensure that the top of the HTML has the following declaration:
Code:
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >
Second, Universal float closed (very important!) You can use this to solve multiple div alignment when the spacing is not right,
The principle of clear float can be found in [how to clear floats without Structural Markup]
Add the following code to the global CSS and add class= "Clearfix" to the div that needs to be closed.
Code:
<style>
/* Clear Fix */
. 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>
Iii. other compatibility tips (quite useful)
1, FF setting padding after the div will cause width and height to increase, but IE will not. (Can be resolved with!important)
2, centering problem.
1). Center vertically. Set Line-height to the same height as the current Div, and then through Vetical-align:middle. (Note that the content does not wrap.)
2). Center horizontally. margin:0 Auto; (of course not everything)
3, if you need to give the contents of a tag style, you need to set display:block; (common in navigation labels)
4, the FF and IE to the BOX understanding of the difference caused by 2px is also set to float div under IE margin doubled and so on.
5, UL label under FF The default is List-style and padding. It is advisable 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-shaped cursor. Cursor:pointer. And the hand only applies to IE. Paste the code:
Compatible code: Compatible with the most recommended modes.
/* FF */
. Submitbutton {
Float:left;
width:40px;
height:57px;
margin-top:24px;
margin-right:12px;
}
/* IE6 */
*html. Submitbutton {
margin-top:21px;
}
/* IE7 */
*+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 released by Microsoft IE7 Browser compatibility does give some Web developers to add a heavy burden, although IE7 has been standardized, but there are many and FF different places, so need to use IE7 compatibility, many friends asked IE7 compatibility is what, in fact, I do not know. For the time being, we haven't found IE7 dedicated compatibility. In addition to the previous piece, the "CSS style for Firefox IE6 IE7" Compatibility is also very useful.
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
Now most are compatible with!important, for IE6 and Firefox test can be normal display, but IE7 to!important can be interpreted correctly, will cause the page did not display as required! Find a good compatibility for IE7 is to use "*+html", now with IE7 browsing, should be no problem now write a CSS can do this:
#1 {color: #333;}/* Moz */
* HTML #1 {color: #666;}/* IE6 */
*+html #1 {color: #999;}/* ie*/
Then under Firefox font color display as #333ie6 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 should be explained that if you want to use this method to make the whole page to center, it is recommended not to set in a Div, you can split the div in turn, as long as in each of the split Div defined margin-right:auto; Margin-left:auto; You can do 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-
}
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;//You can simulate an inline element as a block element display:inline;//Achieve the same row arrangement effect
iplay:table;
5 ie with width and height issues
IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is 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 doesn't 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:e-xpression (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
. Compatible with box{
display:table;
Display an object as a block-element-level table
}
Or
. Compatible with box{
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 does not affect the Ie/win browser. The most troublesome of these
... #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;
That's 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]{}
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;}/*ff,op Visible */
select:empty {font:12px!important;}/*safari Visible */
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/*IE6 does not recognize */: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/*IE6,IE5 does not recognize */: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/*IE5 does not recognize */{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 understanding of misunderstanding, not a page requires a lot of compatibility to maintain multi-browser compatibility, in many cases, perhaps a compatibility is not Also allows 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, you 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
/**//*/
@import "Ie5mac.css";
/**/
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 running up perfect is not very envious? 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&gt, and then <li&gt, 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&gt, 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 (outside, spacing, height, width) is almost no difference, perhaps careful you will be in a moment to find a two pixel difference, but it 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-alleviate your annoyance. You can Ul.class1, Ul.class2, UL.CLASS3 {xxx:xxxx} in a convenient way to sort out where you want to be compatible, and unified compatible. Try it, no more nesting, although in the div+css way you can almost think how to nest nested, but according to the above rules you will be a lot easier, so that the less

Use CSS hack to resolve IE5 IE5.5 IE6 Firefox browser compatibility
December 08, 2006 Friday 08:49
has been more concerned about, recently found a relatively full, share a bit.
For different browsers to see the effect, we certainly do not need to write a style for each browser version, here we take advantage of "ie conditional comment."
After looking for some relevant CSS hack, summarize the several methods.
1. Distinguish between FF and IE
1-1
First of all, of course!important Dafa, you can elevate the application priority of the specified style rule, as in the following example:
Insert Code:
div{
Background-color:red!important;
Background-color:blue;
Because the!important declaration is not absolute in IE6, it is replaced by the property definition of the same name. That is, in the example above, IE6 applies the last value of the background color, which is "blue", while the value of the background color in FF is "red".
1-2
There is another way, ie browser can identify ">" and other symbols, such as "~", "" ","
Insert Code:
div{
background-color:red;
>background-color:blue;
The background color in the FF is red, and the background color in IE is blue, according to the rules redefined by the style, if the browser can recognize ">", you should get the blue background, so you can know that ">" only IE can be recognized.
In this way, we can split the style of FF and IE away. Here is the solution to the problem of IE itself.
2. Distinguish between IE5.5 and other versions of IE
See an example:
Insert Code:
div{
>background-color:black;
>background-color/*ie5.5*/: Green;
This example uses ">", only IE can be identified, the black background is obtained in the IE6, and the green background is obtained in the IE5.5, and the black background is obtained in the IE5. This shows that the second sentence definition only IE5.5 can identify, this is a very early release of the hack, you can find the relevant information on the Internet, it is important to note that after the attribute name there is a space.
We have separated the FF, IE5.5 and IE6, and what about the IE5? In fact, now we just have to separate IE5 and IE6 OK.
3. Distinguishing between IE5 and ie5.5+
Insert Code:
div{
>background-color:red;
}
div/*ie5.5+*/{
>background-color:black;
Here we also use a hack, that is, "div/**/{}", which is defined in the version above IE5 to be recognized. The result of this example is that the background color in the IE5 is red, and the black background is obtained in the IE5 and above versions.
4. The Complete hack
This allows us to define different styles for different browsers. Take a look at a complete example:
Insert Code:
div{
width:500px;
height:50px;
Background-color:red!important;/*ff*/
background-color:blue;/*ie5*/
Text-align:center;
}
div/*ie5.5+*/{
>/*ie only*/background-color:black;/*ie6*/
>/*ie only*/background-color/*ie5.5*/: Green;
It should be noted that the "Background-color" definition in the example above cannot be changed, that is, ff-ie5-ie6-ie5.5. The definition of IE should be ">" before the attribute, because the hack "div/**/{}" is recognized in FF.
Mouse Hand Shape: (compatible with IE FF) hand is equivalent to pointer, and the latter can be compatible with IE and f!
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Many problems are found in the FF test div+css, the main reason is that the code is not standard writing.
1, centering problem
Div, ie is centered by default, and FF is left-aligned by default.
The way to center the FF content is to add code Margin:auto;

2, the height of the problem
There are two horizontal div arrangement, the above div set height (height), if the actual content of the div is greater than the set height, there will be two div overlap phenomenon in the FF, but in IE, the following Div will automatically give space to the above Div. So in order to avoid overlapping layers, the height must be controlled properly, or simply do not write height, let him automatically adjust.
or set: Overflow:hidden

3, Clear:both;
Take footer As an example, sometimes if you use the float-controlled N-column layout above, then footer is likely to be dishonest and move around when using FF-because he is still under the control of floating (float). If you want it to stay at the bottom of the page and write Clear:both in the footer Div, you can get the results!

4. Double the 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
}

5, the key explanation: Display:block,inline two elements display (show)
Display:block; You can simulate an inline element as a block element
Display:inline; The effect of implementing the same row arrangement
diplay:table; For FF, simulating the effect of table
The Display:block elements are characterized by:
Always start on a new line;
Height, row height and top and bottom margin can be controlled;
The width defaults to 100% of its container unless a width is set
<div>, <p>, Display:inline is to display elements as inline elements.
The features of the inline element are:
And the other elements are on one line;
Height, row height and top and bottom margin can not be changed;
Width is the width of the text or picture, and it cannot be changed.
<span>, <a>, <label>, <input>, , <strong> and <em> are examples of inline elements.
Example:
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Untitled Document </title>
<style type= "Text/css" >
#inline {width:400px; Height:40px;background: #99CCCC;p adding:15px 0px 0px 15px}
#inline ul{margin:0px; list-style:none;}
#inline ul li{display:inline; font-size:12px;margin-left:5px}
#block {width:400px; Height:40px;background: #FFCC99;p adding:15px 0px 0px 15px}
#block ul{margin:0px; list-style:none;}
#block ul Li{display:block; font-size:12px;height:20px}
#div_inline {width:800px;display:inline;height:120px;}
</style>
<body>
<div id= "inline" >
<ul>
<li> Daily Recruitment Network
<li> Cardiovascular Network
<li> Hypertension Network
<li> Congenital heart disease net
</ul>
</div>
<p>
<div id= "Block" >
<ul>
<li> Daily Recruitment Network </li>
<li> Cardiovascular Network </li>
<li> Hypertension Network </li>
<li> Congenital heart disease net </li>
</ul>
</div>
</p>
</body>
6, IE and ff width and height of the problem
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. The overall narrowest 770px, the widest 1024px, that is, the window is less than 770XP on the bottom scroll bar, if greater than 1024px Automatic Screen center. IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. In this way, if only the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is basically not set width and height.
CSS is designed like this:
#container {
min-width:600px;
Width:expression (Document.body.clientWidth < 600?) "600px": "Auto");
}
The first min-width is normal, but the width of line 2nd uses javascrīpt, which only IE recognizes, which also makes your HTML document less formal. It actually achieves the minimum width by javascrīpt judgment.
The same approach can also be used to achieve the maximum width of IE:
#container
{
min-width:600px;
max-width:1200px;
Width:expression (Document.body.clientWidth < 600?) "600px": document.body.clientWidth > 1200? "1200px": "Auto";
}

7, FF: Support!important, IE is ignored,
Available!important (example: height:30px!important; height:26px;) Special styling for FF
Vertical center of DIV problem: vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line
Cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can
FF: Link border and background color, need to set Display:block, and set Float:left guarantee does not wrap (background picture needs to set Float:left). Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar
The box model in FF and IE explains inconsistencies that result in a 2px resolution:
div{margin:30px!important;margin:28px;}
Note that the order of the two margin must not be written in reverse, according to the statement!important this property IE is not recognized, but other browsers can be recognized. So under IE it is actually interpreted as:
Div css xhtml xml Example source code Example source code
DIV{MARING:30PX;MARGIN:28PX}
Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

In Firefox/mozilla browser, the actual width of the object = (margin-left) + (border-left-width) + (padding-left) + width + (padding-right) + (border-r Ight-width) + (margin-right), while in Ie/opera browser, the actual width of the object = (margin-left) + width + (margin-right).
##########################################################
Five strokes to solve DIV+CSS Web page compatible with IE and FF using DIV+CSS station friends must all know CSS compatibility issues. By it is a beginner in the IE environment very hard to write a smarty pants website, one get FF under the changed. Therefore, it is recommended that the new handwritten code should be tested in both IE and FF environments. Today we teach you five ways to solve the browser compatibility problem completely.
Here you should know that the reason for CSS incompatibility is because each browser to the CSS default property value is not the same result.
The first trick: Assign attribute values to commonly used CSS.
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
img{border:0px;}
UL {margin:0px;padding:0px;} /
UL li {list-style:none;}
The above-built station code is the format of CSS style, let each browser according to the property values we set to render the page
The second trick: object centering on IE and FF
Under IE everyone should know as long as set body{text-align:center;} This will allow you to center the display.
But such a method does not work in FF. This needs to be changed to body:{text-align:center;margin:0px Auto;} Margin means that the up and down distance is 0 pixels, the left and right is automatic. So FF will be centered on the display.
Third Stroke: Vertical centering (only for one row)
For example a high 30px div, the problem is displayed in the upper left corner by default, if you want to vertically center it can add a line-height:30px; If you want him to be in the lower part of the change line-height:30px; the larger the value, the more you need to give a style overflow:hidden to prevent the bursting layer;
Four strokes: Set three styles for each block object
Width:**px;height:**px;overflow:hidden, even if the height and width of the property value is automatic then you also need to set these three styles. The goal is to solve the problem of browser default values.
Step five: CSS styles for IE6, IE7, FF (this trick is often used in special cases)
The original construction site often use!important to set priority, but after the IE7 is not. Here is a solution to IE6, IE7, ff each CSS priority method
#1 {color: #333;}/* FF environment */
* HTML #1 {color: #666;}/* IE6 environment */
*+html #1 {color: #999;}/* IE7 environment */
The above writing order must not be changed.
This way the page under the FF display #333,ie6 under the display #666,ie7 under the display #999;