div css layout browser compatible_html/css_WEB-ITnose

I recently worked on a project system that used div css to control the front-end display interface and found that the display effect under various browsers varies greatly. Now I am looking for some information about div css and browsers to make a summary. A study of div css knowledge.
The most commonly used method to distinguish between Firefox and IE is the !important method. For compatibility issues with different browsers and different versions of the browser, there are also the following methods, such as: @import, comments, attribute selectors, sub- Methods such as object selector and voice-family are described in "Css Website Layout Record".
The following are the CSS compatibility issues between IE and Firefox
1. DOCTYPE affects CSS processing
2. FF: The div is already centered when margin-left and margin-right are set to auto, but IE does not work
3.FF: When the body is set to text-align, the div needs to set margin: auto (mainly margin-left, margin-right) It can be centered
4.FF: After setting padding, the div will increase the height and width, but IE will not, so you need to use !important to set an additional height and width
5.FF: Support !important, IE then Ignore, you can use !important to set a special style for FF. It is worth noting that you must place the xxxx !important sentence above another sentence
6. Vertical centering problem of div: vertical-align:middle; increases line spacing Line-height:200px to the same height as the entire DIV; then insert the text and it will be vertically centered. The disadvantage is that you need to control the content without wrapping
7. cursor: pointer can display the cursor finger shape in IE FF at the same time, hand can only be used in IE
8. FF: add a border and background color to the link, you need to set display: block, At the same time, set float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.
9. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. Solution: div{margin:30px!important;margin:28px;}
Note that the order of these two margins must not be reversed. According to Ajie, the !important attribute cannot be recognized by IE, but other browsers can. So it is actually interpreted like this under IE: div{maring:30px;margin:28px}
If the definition is repeated, the last one will be executed, so you cannot just write margin:XXpx!important;
10.IE5 and IE6 The BOX interpretation is inconsistent
div under IE5{width:300px;margin:0 10px 0 10px;}
The width of the div will be interpreted as 300px-10px (right padding)-10px (left padding) and the width of the final div is 280px, while the width on IE6 and other browsers is calculated as 300px 10px (right padding) 10px (left padding) = 320px. At this time we can make the following changes to div{width:300px! important;width /**/:340px;margin:0 10px 0 10px}

About this/**/. I don’t quite understand what it is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands it, please Tell me, thanks! :)
11. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value, so defining ul{margin:0;padding:0;}
first can solve most problems

Notes:
1. The float div must be closed.
For example: (where the attributes of floatA and floatB have been set to float:left;)<#div id="floatA" >
<#div id="floatB" >
< #div id="NOTfloatC" >
The NOTfloatC here does not want to continue to pan, but wants to be arranged downwards.
This code has no problem in IE, the problem lies in FF. The reason is that NOTfloatC is not a float label, and the float label must be closed.
Add <#div class=”clear”> between <#div class=”floatB”>
<#div class=”NOTfloatC”>
This div must pay attention to the declaration position and must be placed in the most appropriate place. It must be at the same level as the two divs with float attributes. There cannot be a nested relationship between them, otherwise an exception will occur.
And define the clear style as follows: .clear{
clear:both;}
In addition, in order to allow the height to automatically adapt, add overflow:hidden;
When a float box is included, the automatic height adaptation is invalid in IE. At this time, the layout private attribute of IE should be triggered (the evil IE!). You can use zoom:1; to achieve compatibility.
For example, a wrapper is defined as follows: .colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
2. The problem of doubling margin.
The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6.
The solution is to add display:inline;
to this div. For example:
<#div id="imfloat">
The corresponding css is
#IamFloat{
float:left;
margin:5px;/*Under IE, it is understood as 10px*/
display:inline;/*Under IE, it is understood as 5px*/}
3. Regarding the inclusive relationship of containers
Many times, especially when there are parallel layouts in the container, such as two or three float divs, width problems are prone to occur. In IE, the width of the outer layer will be squeezed by the wider inner div. Be sure to use Photoshop or Firework to measure with pixel-level accuracy.
4. Questions about height
If content is added dynamically, it is best not to define the height. Browsers can automatically scale, but if it is static content, it is best to set the height. (It seems that sometimes it won’t open automatically, I don’t know what’s going on)
5. The most ruthless method - !important;
If there is really no way to solve some detailed problems, you can use this method. FF "!important" will be automatically parsed first, but IE will ignore it. As 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 worth noting that xxxx !important must be used One sentence is placed above another sentence. As mentioned above
IE7.0 is out, and there are new problems with CSS support. There are more browsers, and the compatibility of web pages is getting worse. We are still struggling. In order to solve the compatibility problem of IE7.0, I found the following article:
Now I mostly use !important for hacking. The ie6 and firefox tests can display normally, but ie7 can correctly interpret !important, which will cause the page not to be displayed as required! After searching, I found a good hack for IE7 which is to use "* html". Now browse it with IE7 and there should be no problem.
Now write a CSS like this:
#example { color: #333; } /* Moz */
* html #example { color: #666; } /* IE6 */
* html #example { color: #999; } /* IE7 */
Then the font color is displayed as #333 under firefox, #666 under IE6, and #999 under IE7. They are all mutually exclusive. Don't interfere.



CSS is of high value for browser compatibility. Usually there are big parsing differences between IE and Firefox. Here are some compatibility points.

Common compatibility issues:

1.DOCTYPE affects CSS processing

2.FF: div is already centered when margin-left and margin-right are set to auto, but IE does not work

3.FF: When setting text-align on the body, the div needs to set margin: auto (mainly margin-left, margin-right) to be centered

4.FF: After setting padding, div will increase height and width, but IE will not, so you need to use !important to set an additional height and width

5.FF: supports !important, but IE ignores it. You can use !important to set a special style for FF

6. Vertical centering problem of div: vertical-align:middle; Increase the line spacing to the same height as the entire DIV line-height:200px; Then insert text and it will be vertically centered. The disadvantage is that you need to control the content without wrapping

7.cursor: pointer can display the cursor finger shape in IE FF at the same time, hand only IE can

8.FF: add a border and background color to the link, You need to set display: block and float: left to ensure no line breaks. Referring to menubar, setting the height of a and menubar is to avoid dislocation of the bottom edge display. If height is not set, a space can be inserted in menubar.

9. The BOX model interpretation in mozilla firefox and IE is inconsistent, resulting in a 2px difference. Solution:
div{margin:30px!important;margin:28px;}
Pay attention to these two margins The order must not be reversed. According to Ajie, the !important attribute cannot be recognized by IE, but other browsers can. So it is actually interpreted like this under IE:
div{maring:30px;margin:28px}
If you repeat the definition, it will be executed according to the last one, so you cannot just write margin:XXpx!important;

10. The BOX interpretation of IE5 and IE6 is inconsistent
Under IE5
div{width:300px;margin:0 10px 0 10px;}
The width of the div will be interpreted as 300px-10px (right padding)- The width of the final div of 10px (left padding) is 280px, but on IE6 and other browsers, the width is calculated as 300px 10px (right padding) 10px (left padding) = 320px. At this time we can make the following modifications
div{width:300px!important;width /**/:340px;margin:0 10px 0 10px}
About this/**/ I don’t quite understand what it is. I only know that IE5 and firefox support it but IE6 does not. If anyone understands If so, please tell me, thanks! :)

11. The ul tag has a padding value by default in Mozilla, but in IE only margin has a value, so define it first
ul{margin:0;padding:0;}
It can solve most problems

Notes:

1. The float div must be closed.

For example: (The attributes of floatA and floatB have been set to float:left;)
<#div id="floatA" >
<#div id="floatB" >
<#div id="NOTfloatC" >
The NOTfloatC here does not want to continue to translate, but wants to move down.
This code has no problem in IE, the problem lies in FF. The reason is that NOTfloatC is not a float label, and the float label must be closed.
Add between
<#div class="floatB">
<#div class="NOTfloatC">

<#div class="clear">
This div must pay attention to the declaration position, it must be placed in the most appropriate place, and it must be combined with two objects with float attributes There cannot be a nested relationship between divs at the same level, otherwise an exception will occur.
And define the clear style as follows:
.clear{
clear:both;}
In addition, in order to allow the height to automatically adapt, add overflow in the wrapper: hidden;
When a box containing a float is used, the automatic height adaptation is invalid under IE. At this time, the layout private attribute of IE should be triggered (the evil IE!) You can use zoom:1; to achieve this. compatible.
For example, a wrapper is defined as follows:
.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}

2. Double margin question.

The margin set for a div set to float under IE will be doubled. This is a bug that exists in ie6.
The solution is to add display:inline;
to this div. For example:
<#div id="imfloat">

Corresponding css For
#IamFloat{
float:left;
margin:5px;/*under IE, it is understood as 10px*/
display:inline;/*under IE, it is understood as 5px*/}

3. Regarding the inclusive relationship of the container

Many times, especially when there is a parallel layout in the container, such as two or three float divs, the width is prone to problems. In IE, the width of the outer layer will be squeezed by the wider inner div. Be sure to use Photoshop or Firework to measure with pixel-level accuracy.

4. Questions about height

If content is added dynamically, it is best not to define the height. Browsers can automatically scale, but if it is static content, it is best to set the height. (It seems that sometimes it won’t open automatically, I don’t know what’s going on)

5. The most ruthless method - !important;

If there is really no way to solve some detailed problems, You can use this method. FF will automatically parse "!important" first, but IE will ignore it. As 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 worth noting that the sentence xxxx !important must be placed above another sentence, as mentioned above
----------------------- -------------------------------------------------- -------------------------------------------------- ------
First review the cracking of IE box-model
The notorious bug of IE box-model exists in every version before IE6/Win. This bug was not released until tantak The most widely circulated hack has just begun to be tamed

http://www.tantek.com/CSS/Examples/boxmodelhack.html

IE5.X/win analysis of box-model It's the same. They think that width includes border and padding. Fortunately, this situation has improved in IE6
However, while IE6 is backwards compatible, it also tolerates previous errors. In fact, IE6 There are two cores. Before the old page, he still showed tolerance for errors. Only by strictly adding the document type (DOCTYPE) declaration to the document can IE6 accept the correct box-model
Therefore, tantak's The hack must be included in the document with the correct DOCTYPE to work properly
Quote
div.content {
width:400px; //This is the wrong width, all browsers read it
voice-family: ""}""; //IE5.X/win ignores the content after ""}""
voice-family:inherit;
width:300px; //Including IE6/win Some browsers read this sentence, and the new value (300px) overwrites the old
}
html>body .content { //html>body is written in CSS2
width:300px; //Browsers that support CSS2 are lucky enough to read this sentence
}
Now back to the topic, we often see !important and (space)/**/: are used together. What’s the secret of this writing method?

Look at the writing method just now, I can provide another writing method that can also achieve this effect
Quote
div.content {
width:300px !important; //This is correct width, most browsers that support the !important tag use the value here
width (space)/**/:400px; //IE6 /win does not parse this sentence, so IE6/win still thinks that the value of width is 300px; when IE5. Function
}
html>body .content { //html>body is written in CSS2
width:300px; //Browsers that support CSS2 are lucky enough to read this sentence
}
Likewise, this method must still rely on Correct document type declaration can work properly, for the reasons mentioned earlier.

The document type declaration is like a switch, opening up the future of backward compatibility, and if used incorrectly, it is a Pandora box
----------------- -------------------------------------------------- -----------------------------------------------
ie7.0 Regardless of whether it is an improvement over ie6.0, the incompatibility between ie7 and ie6 has undoubtedly introduced new pain points. At least in the debugging process, there is another program and the accompanying problems. Lots of incompatibilities.

At present, there are still only a few users using ie7.0, and users using ie6.0 still account for a large proportion. However, a large number of web pages that passed the IE6 test are not displayed properly in IE7.0.

According to the official explanation of IE7.0:

IE7.0 introduces strict mode based on IE6, which includes many improvements in the parsing and presentation of Cascading Style Sheets (CSS). These improvements are intended to improve the consistency with which Internet Explorer interprets cascading style sheets to meet W3C recommended standards while providing developers with a feature set they can rely on.

No matter how beautiful the official language is, or whether IE7.0 is really W3C, there are too many personalized things and too many differences between browsers, leaving us helpless. The webpage designed under IE7.0 is almost unsightly when displayed under IE6. So, when we design web pages, while solving the compatibility problem between IE6.0 and Firefox, should we obey more IE7.0 which is in compliance with W3C, or should we compromise on 96% IE6.0? This question is actually a bit redundant. What we can do is perhaps choose moderation and debug as much as possible until all browsers display normally.

IE7.0 and IE6.0 are incompatible. As far as I know, there are the following aspects. If there are any omissions or mistakes, please feel free to add or correct them later.


1. There are different width definitions in ie7 and ie6 div css
There are different interpretations of width in width definition. The width of IE7 is wider than that of IE6. It is for this reason that the web page may be There is an overflow problem. Fortunately, this problem can be solved by changing the value or modifying the percentage.


2. ie7.0 fixed the !important bug.
Previously, due to a bug in ie6.0's recognition of !important, the BOX model interpretation in firefox and IE was inconsistent, resulting in a difference of 2px. Most web standard designers used this bug to make ie6.0 and firefox compatible, that is, using: div {margin:30px!important;margin:28px;}. But IE7.0 fixed this bug, so the problem reappeared. How can I be compatible with IE.7.0 and at the same time be compatible with IE6.0 and Firefox?


3. Box Model changes
In IE7, the overflow behavior is modified to adapt to the CSS2.1 box model.


4. Some CSS filters will no longer be available in IE7.0
Many potential parsing errors have been modified in IE7, which may prevent filters from working properly in previous IE versions. Such as: *HTML filter, underline filter and /**/comment filter, etc.


5. IE7.0 no longer supports many non-standard css, and has stricter requirements for js grammar.
Many js pages that are displayed normally under IE6 cannot be displayed normally under IE7, and no errors are prompted. IE7.0 has stricter requirements for js syntax, but this specification does not seem to explain, nor does it clearly tell everyone how they "standardize" and "standardize" it.