[Reprinted] features related to compatibility of IE6, IE7, and FF in Div CSS design

Reprinted from: http://hi.baidu.com/zhenghanzheng/blog/item/840e5501d2c71b0a7aec2c81.html

When designing a website, pay attentionCSS style compatibilityDifferent browser problems, especially those designed for completely using Div CSS, should pay more attention to IE6 IE7 FF's compatibility with CSS styles. Otherwise, your network may be out of chaos and do not want to have any effect!

All browsers
Height: 100px;
Dedicated for IE6
_ Height: 100px;
Dedicated for IE6
* Height: 100px;
Dedicated for IE7
* + Height: 100px;
Share IE7 and FF
Height: 100px! Important;
I. CSS compatibility
The following two methods can solve almost all of today's compatibility.
1 ,! Important (not recommended. Use the following one to feel the safest)
With IE7! Important Support ,! The important method is only compatible with ie6. (note the writing method. Remember that the declaration position must be in advance .)
Code:
<Style>
# Wrapper {
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Style>
2, IE6/ie77 for firefox <from CSS style for Firefox IE6 IE7>
* + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is also a unique tag of IE7.
Code:
<Style>
# Wrapper {width: 120px;}/* Firefox */
* Html # wrapper {width: 80px;}/* IE6 fixed */
* + Html # wrapper {width: 60px;}/* IE7 fixed, pay attention to the Order */
</Style>
Note:
* + For HTML compatibility with IE7, the following declaration must be made on the top of HTML:
Code:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">
2. Universal float closure (very important !) You can use this to solve the incorrect spacing when multiple Div alignment occurs,
For details about the principle of clear float, refer to [How to clear floats without structural markup]
Add the following code to global CSS and add class = "Clearfix" to the DIV 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>
3. Other compatibility skills (useful)
1. Setting padding for Div under FF will increase the width and height, but IE will not. (available! Important solution)
2. center problem.
1). Vertical center. Set line-height to the same height of the current Div, and then use vetical-align: middle. (Note that do not wrap the content .)
2). horizontal center. Margin: 0 auto; (of course not omnipotent)
3. To add a style to the content of tag a, set display: block)
4. The difference between FF and IE in understanding box leads to the 2px difference. There are also issues such as Div set to float and margin doubling under IE.
5. UL labels are listed-style and padding by default under ff. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists)
6. Do not set the height of the external wrapper Div. It is best to add overflow: hidden to achieve highly adaptive.
7. for hand-shaped cursor. cursor: pointer. And hand only applies to IE. Pasting code:
Compatible code: compatible with the most recommended mode.
/* 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 compatibility? When we use different browsers (Firefox IE7 IE6) to access the same website or page, some incompatibility problems may occur, and some may be displayed as normal, some of them are not normal, and we will be very annoyed when writing CSS. After fixing this browser problem, another browser has a new problem. Compatibility is a way to enable independent writing in a CSS to support different browser styles. This is harmonious. Haha!
The compatibility of Internet Explorer 7 recently released by Microsoft does impose a heavy burden on some page makers. Although IE7 has been standardized, there are still many differences with ff, therefore, we need to use IE7 compatibility. Many friends have asked what IE7 compatibility is. In fact, I don't know. No compatibility for IE7 is found yet. In addition to the previous article, the compatibility method in "CSS style for Firefox IE6 IE7" is also very useful.
Anyone with a logic idea will know that it can be used together with the compatibility of IE and ff. The following describes three compatible products, for example: (suitable for beginners. Haha, let's just pass by here .)
Program code
First compatible, all ie ff browsers are public (in fact not compatible)
Height: 100px;
Second compatible with dedicated Internet Explorer 6
_ Height: 100px;
Third compatible with IE6 IE7 public
* Height: 100px;
After introducing these three compatible attributes, let's take a look at how to define the private compatibility for IE6 IE7 ff for each attribute in a style. Let's look at the following code:
Program code
Height: 100px;
* Height: 120px;
_ Height: 150px;
Next, I will briefly explain how browsers understand these three attributes:
In ff, 2nd and 3 attributes are not recognized, so they read the height: 100px;
In IE7, the third attribute IE7 is unknown, so it reads 1st and 2 attributes, and because the second attribute overwrites the first attribute, therefore, IE7 eventually reads the 2nd attributes * Height: 120px;
In IE6, all three attributes are recognized by IE6, so all three attributes can be read, and because the third attribute overwrites the first two attributes, therefore, IE6 eventually reads the third attribute.
1. CSS style for Firefox IE6 IE7
Most of them are used now! Important is compatible. It can be displayed normally for IE6 and Firefox tests, but IE7 is compatible! Important can be correctly explained, and the page will not be displayed as required! If you find a good compatibility Method for IE7, you can use "* + html". Now you can use IE7 to browse it. It should be okay. Now you can write a CSS file like this:
#1 {color: #333;}/* Moz */
* Html #1 {color: #666;}/* IE6 */
* + Html #1 {color: #999;}/* ie */

The font color in Firefox is displayed as #333, the font color in IE6 is displayed as #666, And the font color in IE7 is displayed as #999.
2. center problem in CSS layout
The main style definition is as follows:
Body {text-align: center ;}
# Center {margin-Right: auto; margin-left: auto ;}
Note:
First, define text-align: center in the parent element. This means that the content in the parent element is centered. for IE, this setting is enough.
However, it cannot be centered in Mozilla. The solution is to add "margin-Right: auto; margin-left: auto;" when the sub-element is defined ;"
It should be noted that, if you want to use this method to center the entire page, it is recommended that you do not set it in one Div. You can split multiple divs in sequence, you only need to define margin-Right: auto; margin-left: auto; in each split Div.
3. Different explanations for the box model.
# 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. Double distance of floating IE
# Box {float: Left; width: 100px; margin: 0 0 0 100px; // in this case, ie will generate a PX distance display: inline; // ignore floating}
Here, let's take a closer look at the block and inline elements. The characteristics of the block elements are that they can always start on a new line, and the height, width, row height, and margins can be controlled (block elements ); the characteristics of the inline element are: on the same line as other elements ,... Uncontrollable (embedded element );
# Box {display: block; // The embedded element can be simulated as the block element display: inline; // the result of the same row arrangement is dilay: Table;
5 questions about IE and width and height
IE does not recognize the Min-definition, but in fact it treats normal width and height as Min conditions. In this case, the problem is big. If only the width and height are used, the values in the normal browser will not change. If only Min-width and Min-height are used, the width and height under IE are not set at all. For example, to set a background image, the width is 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 page width
Min-width is a very convenient CSS command, which can specify that the element is at least or less than a certain width, so as to ensure correct layout. But IE does not recognize this, but it actually uses width as the minimum width. To enable this command to be used on IE, you can place <div> under the <body> label and specify a class for div:
Then 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 is recognized only by IE, which will make your HTML document not formal. It actually achieves the minimum width through javascript judgment.
7. Clear floating
. Compatible with box {
Display: Table;
// Display the object as a table at the Block Element Level
}
Or
. Compatible with box {
Clear: both;
}
Or add: After (pseudo object) to set the content after the object, which is usually used with content. ie does not support this pseudo object, not supported by IE browsers, so it does not affect IE/win browsers. This is the most troublesome
...... # Box: After {
Content: ".";
Display: block;
Height: 0;
Clear: both;
Visibility: hidden;
}
8 DIV floating ie text produces 3 pixel bug
The left object floats, and the left margin of the outer patch is used to locate the patch on the right. The text in the right object is 3 px 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 incompatible and is a bug in hiding CSS)
P [ID] {} Div [ID] {}
P [ID] {} Div [ID] {}
This is hidden for versions earlier than ie6.0 and ie6.0. It is used by ff and opera.
There is a difference between the property selector and the Child selector. The range of the Child selector is reduced in the form, and the range of the property selector is relatively large, such as in P [ID, all P tags have IDs in the same style.
10 Internet Explorer
When the DIV application is complicated, there are some links in each column. When the DIV application is complicated, it is prone to the "hide and seek" issue.
Some content cannot be displayed. When you select this area, the content is displayed on the page.
Solution: Use the line-height attribute for # layout or use fixed height and width for # layout. The page structure should be as simple as possible.
11 highly unsuitable
The height mismatch means that the height of the outer layer cannot be automatically adjusted when the height of the inner layer object changes, especially when the inner layer object uses
Margin or paddign. Example:
<Div id = "box">
<P> content in the p object </P>
</Div>
CSS:
# Box {background-color: # Eee ;}
# Box P {margin-top: 20px; margin-bottom: 20px; text-align: center ;}
Solution: Add two empty Div objects to the upper and lower sides of the P object. CSS code:. 1 {Height: 0px; overflow: hidden;} or add the border attribute to the div.
Shield ie browsers (that is, they are not displayed under IE)
*: Lang (zh) Select {Font: 12px! Important;}/* ff, OP visible */
Select: Empty {Font: 12px! Important;}/* safari visible */
Here, select is the selector, which can be changed as needed. The second sentence is unique to the Safari browser on Mac.
Only IE7 Recognition
* + HTML {...}
This compatibility can be used only for IE7 styles.
Identification of IE6 and IE6 or lower
* HTML {...}
In this case, we should pay special attention to the fact that many landlords write IE6 compatibility. In fact, ie5.x can also identify this compatibility. Not recognized by other browsers.
Html/**/> body select {......}
This sentence serves the same purpose as the previous one.
Only IE6 is not recognized
Select {display/* IE6 not recognized */: none ;}
Here we mainly use CSS annotations to separate an attribute and a value, and the stream is prior to the colon.
Only IE6 and ie5 are not recognized
Select/**/{display/* IE6, ie5 does not recognize */: none ;}
The difference here is that a CSS comment is added between the separator and curly braces.
Only ie5 is not recognized
Select/* ie5 not recognized */{display: none ;}
This sentence removes the comment of the attribute area from the previous sentence. Only ie5 is not recognized
Box Model Solution
Selct {width: ie5.x width; voice-family: ""} "; voice-family: Inherit; width: correct width ;}
The box model clearing method is not passed! Important. This should be clear.
Clear floating
Select: After {content: "."; display: block; Height: 0; clear: Both; visibility: hidden ;}
In Firefox, when the child level is floating, the height of the parent level cannot fully cover the entire child level, in this case, we can define the parent level with the compatibility of floating clearance, so that this problem can be solved.
Ellipsis (...)
Select {-o-text-overflow: ellipsis; white-space: nowrapoverflow: hidden ;}
This is a good technique to cut out more text and end it with a ellipsis. But Firefox does not currently support it.
Only opera Recognition
@ Media all and (min-width: 0px) {select {......} }
Set the Opera Browser separately.
All of the above are compatible with CSS. We recommend that you follow the correct tag nesting (div ul Li nested structure), which can reduce the frequency of compatibility and avoid misunderstanding, not a page requires a lot of compatibility to maintain compatibility with multiple browsers). In many cases, a compatible page may not be used to make the browser work very well, these are all used to solve the local compatibility problem. If you want to separate the compatibility content, try several filters below. Some of these filters are written in CSS to import special styles through filters, and some are written in HTML to link or import the required patch styles through conditions.
Ie5.x filter, only visible to ie5.x
@ Media tty {
I {content: "";/* "*/} @ import 'ie5win.css ';/*";}
}/**/
Ie5/MAC filters are generally not required
/**//*/
@ Import "ie5mac.css ";
/**/
The following is the condition annotation of IE. I personally think that it is a perfect solution to use the condition annotation to call the corresponding compatibility. Put the file where compatibility is needed. When the browser version is correct, you can call the compatible style. This is not only convenient to use, in addition, for making this CSS, You can strictly observe whether it is necessary to use compatibility. In many cases, when I write CSS by myself, if I write all the code, including compatibility, to a CSS file, it will be very casual. If I want to be compatible, how can I be compatible? When you write it independently, you may unconsciously consider whether it is necessary to be compatible with CSS first? Or should we first adjust the content in the main CSS to be as incompatible as possible? When you use little compatibility to make many browsers very obedient, do you have a sense of accomplishment? You know how to choose it ~~ Haha
For more information about how to use the if condition of IE, see the IE condition note.
Only IE
All ie identifiable
Only ie5.0 can recognize
Only IE 5.0 +
Both ie5.0 and ie5.5 can be identified.
Only IE6 can recognize
Only IE 7 /-
Ie5.x under IE6 and IE6 can be recognized
Only IE 7 /-
Only IE7 can recognize
If many things in CSS do not follow certain rules, it will upset you, although you can use a lot of compatibility, a lot! Important to control it, but you will find that in the long run you will be reluctant to look at many excellent websites, their CSS let IE6, IE7, Firefox, and even safari, is opera perfect? However, they seem to be less compatible with complex templates. In fact, you need to know that IE and Firefox are not so incompatible. We can find a way to make them coexist harmoniously. Don't think that you have discovered a compatible method, and you have mastered everything. We are not compatible slaves.
Nesting order of Div ul Li
Today, we only talk about one rule. Is the triangular relationship between <div> <ul> <li>. In my experience, <div> is on the outermost side, which is <ul>, and then <li>. Of course, <li> can be nested in <div> or something, but it is not recommended that you nest many things. When you comply with such rules, the bad and disobedient gaps will not appear in it. When you just put <div> in <li>, when you do not use <ul>, you will find that your gap is very difficult to control. In general, IE6 and IE7 will be separated out of thin air. But in many cases, when you come to the next line, the gap will be gone, but the previous content is blank. In this case, although you can change IE's margin, then adjust the padding under Firefox to make the two display very similar, but your CSS will become very smelly, you have to consider more likely to have such a problem to remedy, although you know that they are compatible with each other, you will be bored.
Nesting
Follow the above Nesting Method, <div> <ul> <li> </LI> </ul> </div>, and then tell ul {margin: 0px; padding in CSS: 0px; List-style: none;}, where list-style: none is a mark that does not display dots or numbers at the beginning of the <li> mark, this is because IE and Firefox have different default effects. Therefore, you do not need to do anything in this way. There is almost no difference between your IE6, IE7, and Firefox (the outer distance, distance, height, and width, maybe you will find the difference between one and two pixels at a certain time, but it is perfect. You don't need to adjust the CSS Of a large part to control their display, you are willing to, you can only be compatible with one or two places, and usually this compatibility can adapt to various places, you do not need to repeatedly debug different compatible methods in different places-ease your troubles. You can use ul. class1, ul. class2, ul. class3 {XXX: XXXX} to easily sort out the areas you want to be compatible. Try it out and never nest it out again. Although you can almost think about how to nest it in Div + CSS mode, you will be much easier according to the above rules, to get twice the result!

Category: CSS | add to souzang | browse (90) | comment (0)

Previous Article: IE and Firefox compatibility issues in Div + CSS web pages...