DIV+CSS compatible with browser methods such as IE6 IE7 IE8 IE9 and Firefox Chrome
1.DOCTYPE affects CSS processing 2. Ff:div set Margin-left, margin-right for Auto is already centered, IE not 3. Ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center 4. FF: After setting the padding, the div will increase the height and width, but IE will not, therefore need to use!important to set a height and width5. FF: Support!important, IE is ignored, can be used!important for FF special set style 6.div Vertical center 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 do not wrap 7.cursor:pointer can also display the cursor in IE FF finger shape, hand only IE can be 8. FF: Link plus border and background color, need to set Display:block, and set Float:left guarantee not to break line. 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. 9. The box model in Mozilla Firefox and IE does not explain inconsistencies resulting in 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 of AH-jie! Important This property IE is not recognized, but other browsers can recognize it. So in the case of IE is actually interpreted as such: div{maring:30px;margin:28px} Repeat the definition of the last one to execute, so you can not write only margin:xxpx! important;11. The UL tag in Mozilla default is padding value, and in IE only margin has value, so define ul{margin:0;padding:0 first;} Will solve most of the problems.
Precautions:
1. The div of float must be closed. For example: (where the properties of Floata, FLOATB are already set to Float:left;)
<div id= "Floata" ></div><div id= "FLOATB" ></div><div id= "NOTFLOATC" ></div> The NOTFLOATC here do not want to continue panning, but want to go down the line. This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed. In
<div class= "FLOATB" ></div><div class= "NOTFLOATC" ></div> Plus
<div class= "Clear" ></div> this div must be aware of the location of the declaration, must be placed in the most appropriate place, and must be the same as two with the float attribute of the div sibling, there can be no nested relationship, otherwise it will produce an exception. And the clear style is defined as follows:. Clear{clear:both;} In addition, in order to allow the height can automatically adapt, to add Overflow:hidden in the wrapper, when the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private property (evil IE) with zoom:1; Can be done so that the compatibility is achieved. For example a certain wrapper is defined as follows:. colwrapper{overflow:hidden;zoom:1;margin:5px Auto;}
2, margin double the problem set to float div in IE set the margin will be doubled. This is a bug that exists in a IE6. The solution is to add display:inline to this div; Example: <div id= "Imfloat" ></div>
The corresponding CSS is
#IamFloat {Float:left;margin:5px;/*ie understood as 10px*/display:inline;/*ie under the 5px*/}
3, about the containment relationship of the container many times, especially in the container has a parallel layout, such as two or three float div, the width is prone to problems. In IE, the width of the outer layer is broken by a wider div. Be sure to use Photoshop or firework to take pixel-level accuracy. 4, about the height of the problem if the content is dynamically added, it is best not to define the height. The browser can automatically scale, but if it is static content, the height is best set. (It seems that sometimes does not automatically open up, do not know the specific how to) 5, the most ruthless means-!important; if there is no way to solve some of the details, you can use this method. FF will automatically parse for "!important", but IE will be ignored.
. 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 worth noting that the XXXX!important must be placed on the other sentence above, the above has mentioned IE7.0 support for CSS and new problems. Browser more, page compatibility worse, tired or we, in order to solve IE7.0 compatibility problems, find the following article:
Now I mostly use!important to hack, for IE6 and Firefox test can display normally, but IE7 to!important can correctly explain, will cause the page did not display as required! Search for a bit, find a good hack way for IE7 is to use "*+html", now with IE7 browsing, there should be no problem. Now write a CSS that can do this:
#example {color: #333;}/* Moz */* HTML #example {color: #666,}/* IE6 */*+html #example {color: #999;}/* IE7 *
Then under Firefox font color display as #333,ie6 under the font color display as #666,ie7 under the font color display as #999.
It's a cliché that CSS is compatible with every browser, and the tutorials are all over the Web. The following content is not too many novel, purely personal summary, I hope to have some help for beginners. One, CSS hack the following two ways to solve almost all of today's 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.)
<style> #wrapper {width:100px!important;/* IE7+FF */width:80px;/* IE6 */}</style>
2, Ie6/ie77 to Firefox
*+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;}/* FireFox */*html #wrapper {width:80px;}/* IE6 fixed */*+html #wrappe R {width:60px;}/* IE7 fixed, note order */}</style>
Note: *+html's hack to IE7 must ensure that the HTML top 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 closure on the principle of clear float see [How to clear floats without Structural Markup] Add the following code to the global CSS, the need to close the Div plus class= "c Learfix "Can, tried.
<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 1, FF setting padding after the div will cause width and height to increase, but IE will not . (Available!important resolution) 2, centering 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, it is necessary to set display:block (common in Navigation label) 4, the difference between FF and IE on BOX understanding results in 2px difference and the div set to float is in IE The issue of double margin. 5, UL label under FF the List-style and padding are the default. 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 kill height, preferably plus overflow:hidden. To achieve a highly adaptive. 7, about the hand cursor. Cursor:pointer. And hand only applies to IE.
1 for Firefox IE6 IE7 CSS style is now mostly used!important to hack, for IE6 and Firefox test can be normal display, but IE7 to!important can be interpreted correctly, will cause the page does not appear as required! Find a good IE7 for the hack Way is to use "*+html", now with IE7 browsing, there should be no problem. Now write a CSS that can do this:
#1 {color: #333;}/* Moz * * HTML #1 {color: #666,}/* IE6 */*+html #1 {color: #999;}/* IE7 */
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 problems in CSS layouts The main styles are defined 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; "What needs to be explained is 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 sequentially split multiple div, as long as in each split div defined margin-right:auto; Margin-left:auto; You can do it.
3 box models 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+ie 6.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's a bit of block,inline two elements, the block element is characterized by: always start on new lines, height, width, row height, margin can be controlled (block element); The inline element is characterized by the same line as the other elements,... Uncontrollable (inline Element), #box {display:block;//Can be simulated as block element display:inline for inline elements,//effect diplay:table for the same row arrangement;
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. In order for this command to work on IE, you can put a div under the body tag and then assign a class to the div: then the 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 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 does not 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 for IE6.0 and IE6.0 the following versions are hidden, FF and Opera action attribute selector and sub-selectors are still different, the range of the sub-selector is reduced from the form, the range of the property selector is larger, such as P[id], 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 intolerance is when the height of the inner object changes, the outer height cannot be automatically adjusted, especially when the inner object uses margin or paddign. Cases:
<div id= the contents of the "box" > <p>p object </p> </div> CSS: #box {} #box p {margin-top:20px;margin-bottom:20px; te Xt-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.
/*ie and Firefox CSS compatibility Daquan */1.DOCTYPE affect CSS processing
2.ff:div set Margin-left, Margin-right is auto when the center, IE No
3.ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center
4.FF: After setting padding, Div will increase height and width, but IE will not, so need to set a height and width with!important
5.FF: Support!important, IE is ignored, can be used!important for FF special setting style
6.div Vertical centering 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
7.cursor:pointer can display the cursor finger in IE FF at the same time, hand only IE can
8.FF: Link with border and background color, need to set Display:block, and set Float:left guarantee does not break line. 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.
9. In Mozilla Firefox and IE, the box model interpretation inconsistent results in 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 of Alfonso !important This property IE is not recognized, but other browsers can recognize it. So in the IE actually explained to this: div{maring:30px;margin:28px} repeated definition, according to the last one to execute, so can not write only margin:xxpx!important;
10.ie5 and IE6 's box explain inconsistent IE5 under div{width:300px;margin:0 10px 0 10px;} The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated as 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following changes Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px} about this/**/is what I do not understand, only know IE5 and Firefox support but IE6 not support, if anyone understand, please tell me, thank you! ：）
11.UL tags in mozilla default is the padding value, and in IE only margin has value so first define ul{margin:0;padding:0;} can solve most problems
Precautions:
1. The div of float must be closed.
For example: (where the properties of Floata, FLOATB are already set to Float:left;)
< #div id= "Floata" ></#div > < #div id= "FLOATB" ></#div > < #div id= "NOTFLOATC" ></#div > Here the NOTFLOATC doesn't want to continue panning, but wants to go down the line. This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed. In
< #div class= "FLOATB" ></#div > < #div class= "NOTFLOATC" ></#div > Add < #div class= "clear" > </#div > This div must be aware of the location of the declaration, must be placed in the most appropriate place, and must be the same as two with a float attribute of the div sibling, there can be no nested relationship, otherwise it will produce an exception. And the clear style is defined as follows:. clear{Clear:both; In addition, in order to allow the height can automatically adapt, to add Overflow:hidden in the wrapper; When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private property (evil ie Ah!). ) with zoom:1, can be done, so that the compatibility is achieved. For example a certain wrapper is defined as follows:. colwrapper{Overflow:hidden; zoom:1; margin:5px Auto;}
2. Double the issue of margin.
A div set to float doubles the margin set under IE. This is a bug that exists in a IE6. The solution is to add display:inline to this div; For example:
< #div id= "imfloat" ></#div >
The corresponding CSS is
#IamFloat {float:left; Margin:5px;/*ie understood as 10px*/Display:inline;/*ie and understood as 5px*/}
3, about the containment of the container relationship
Many times, especially when there are parallel layouts in the container, such as two or three float's Div, the width is prone to problems. In IE, the width of the outer layer is broken by a wider div. Be sure to use Photoshop or firework to take pixel-level accuracy.
4, about the height of the 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. (Sometimes it doesn't seem to be going off automatically, not knowing what's going on)
5, the most ruthless means-!important;
If there is no way to solve some of the details, we can use this method. FF will automatically parse for "!important", but IE will be ignored. 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 */}
DIV+CSS compatible (ii)
April 02, 2008 Wednesday 10:58
DIV+CSS compatible IE6 IE7 Firefox
In the difference between Firefox and IE, the most commonly used is the!important method, for other different browsers and browsers and different versions of the compatibility problem has the following methods, such as: @import, comments, property selectors, sub-object selectors and Voice-family methods, these methods in the CSS site layout of the record, there is a narrative.
Here are the CSS compatibility issues with IE and Firefox
1.DOCTYPE Impact CSS Processing
2.ff:div set Margin-left, Margin-right is auto when the center, IE No
3.ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center
4.FF: After setting padding, Div will increase height and width, but IE will not, so need to set a height and width with!important
5.FF: Support!important, IE is ignored, can be used!important for FF special setting style
This article from station cool net - pwdesign Original, reproduced please retain this information, thank you for your cooperation.
{}DIV+CSS compatible with browser methods such as IE6 IE7 IE8 IE9 and Firefox Chrome
