XHTML + CSS compatibility Solution

The XHTML + CSS compatibility solution has many advantages when using the XHTML + CSS architecture, but there are also some problems, whether it is because you are not skilled or have unclear ideas, I will first write down some of the problems I encountered below and search for them in the province.

1. The box model interpretation in Mozilla Firefox and IE is inconsistent, resulting in a 2px difference. solution:

Reference content:
Div {margin: 30px! Important; margin: 28px;} note that the order of the two margin cannot be reversed! The important attribute ie cannot be identified, but other browsers can. So in IE, it is actually explained as follows:

Reference content:
Div {maring: 30px; margin: 28px}
If the definition is repeated, execute the last statement. Therefore, you cannot write only margin: xxpx! Important;

2. the box interpretations of ie5 and IE6 are inconsistent. Div {width: 300px; margin: 0 10px 0 10px;} Div width is interpreted as 300px-10px (right filling) -10px (left filled) the final Div width is 280px, while the width on IE6 and other browsers is 300px + 10px (right filled) + 10px (left filled) = 320px. In this case, we can make the following changes:

Reference content:
Div {width: 300px! Important; width/**/: 340px; margin: 0 10px 0 10px}
I don't quite understand what/**/is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

3. UL labels have padding values by default in Mozilla, while in IE, only margin has values. Therefore, we should first define:

Reference content:
Ul {margin: 0; padding: 0 ;}
Most problems can be solved.

4. For the script, the language attribute is not supported in xhtml1.1.CodeChanged:

Reference content:
& Lt; Script Type = "text/JavaScript" & gt;
You can.

5. If you set the direction of float and text-align in the box container to the same:

Reference content:
{Float: Left; text-align: Left; margin: 0 0 200px ;}
We can make the following changes:

Reference content:
{Float: Left; text-align: Left; margin: 0 0 0 200px; display: inline ;}
Superadmin
The most basic CSS compatibility skills of FF and IE are further supplemented and sorted by JavaScript. Updated @ 2007/3/11

Common CSS considerations:
Http://www.awflasher.com/blog/archives/638-Reprinted. Please keep the link and modify it at any time!
Notes for compatibility with IE and FF
1. The DIV of float must be closed.
Example: (floata and floatb attributes have been set to float: Left ;)

<Wrapper>
<Div id = "floata"> </div>
<Div id = "floatb"> </div>
<Div id = "notfloatc"> </div>
</Wrapper>

The notfloatc here does not want to continue translation, but wants to move down.
This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed.
In
<Div id = "floatb"> </div>
<Div id = "notfloatc"> </div>
<Div class = "clear"> </div>
Aw reminds you: This Div must pay attention to its declaration position. It must be placed in the most appropriate place and must be at the same level as the two DIV with the float attribute. No nested relationship exists between them, otherwise, an exception occurs.
And define the clear style as follows:

. Clear
{
Clear: both;
}

In addition, in order to automatically adapt to the height, overflow: hidden should be added to the wrapper;
When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used to achieve compatibility.
For example, a certain wrapper of mine is defined as follows:

. Colwrapper
{
Overflow: hidden;
Zoom: 1;
Margin: 5px auto;

} [/Code] onhavinglayout-Do not miss it. Everyone who makes CSS and uses scripts to operate Dom must not miss it!

2. The problem of doubling margin.
The DIV set to float doubles the margin set in IE. This is a bug in IE6.
The solution is to add the display: inline In the div;
For example:
<Div id = "iamfloat"> </div>
The corresponding CSS is

# Iamfloat
{
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */
}

3. Container inclusion relationships
In many cases, especially when the container has a parallel layout, such as two or three float Divs, the width is prone to problems.
In ie, the width of the outer layer is broken by the DIV with a wider inner layer.
You must use Photoshop or firework to obtain pixel-level precision.

4. Questions about height
If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)

5. the most cruel means -! Important;
If there is no way to solve some detailed problems, you can use this method. FF "! Important will automatically give priority to resolution, but IE will ignore it.

. 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! The important sentence is placed on another sentence. The specific reason is very simple, so I won't talk about it :)

Supplement:
This post was published at that timeArticleAnd I didn't think much about JavaScript at that time. Updated this time.
1. Border of IE6. It will automatically add margin.
When the margin between the first box and the second box is a, if both boxes do not have border, then IE6, IE7, and FF are all correct.
When there is a border, FF and IE7 border will not take up the "space" between them, and IE6, the old guy who likes "self-made smart", will open margin.
I have not debugged whether padding can have this side effect. I personally suspect that it also exists. However, since I have analyzed the problem, I will not go into details.
The solution is to determine whether it is IE6 and then dynamically fix margin. In the meantime, technologies such as JS getting browser versions and style values are involved. See
Http://www.awflasher.com/blog/archives/791

2. For block elements, it is best to set the width under IE6 to float, especially the label.

3. In IE, if list-style-position: Inside is used, the Li element may be forcibly indented forward.
Superadmin
IE7 beta2 CSS compatibility when IE7 beta1 was launched, I first tested it. At that time, I was disappointed to find that its support for CSS had almost no changes. Ms recently launched IE7 beta2, which has made many new improvements and changes. However, these improvements and changes may lead to some layout errors on the original normal web pages or the previously usable hack skills are no longer available. At the beginning of the year, msdn listed the possible problems for developers (this is the original article). Here I will briefly describe the main problems and hope to help you.

Note: before the release of IE7, all the content mentioned below may change.

The box model has changed !!!
I am afraid this will make developers who use web standards to build large websites feel the back-to-back changes, but don't worry too much. The main change is that the box model overflows (overflow) content processing method.

Assume that there is a box with a width of PX and a height of PX. At present, the main method of IE is to automatically increase the box to PX. IE7 beta2 adopts the same processing method as FF: the box remains unchanged, and the overflow part is rendered outside the box. That is to say, the overflow value of the box actually uses the W3C default value "visible ".

If your existing layout is dependent on IE's "automatic support", be careful and you may encounter problems (especially dynamic content web pages ).

The XML Prolog may affect the box model.
Oh, my God! Another box model!

As you know, ie has two rendering modes: quirks mode and strict mode. Quirks mode is basically non-standard, including the box model. Its rendering method differs from W3C standard. The strick mode is basically a standard (neither an absolute standard nor an absolute non-standard ......). In IE6 and earlier versions, the rendering mode will be selected based on the doctype declaration written in the first line (or only the first line) of the XHTML document. If you find a doctype that you can recognize, such as XHTML transitional or XHTML strict, it uses strict mode for rendering. Quirks mode is used in all other cases.

Some developers explicitly declare that their XHTML document is an XML document and will be in the first line of the document (the problem is here, it must also be in the first line) add the preface of XML (Prolog ). For example:

<? XML version = "1.0" encoding = "gb2312"?> Although the original intention is to make the document more "standard", because IE does not recognize this line of words, the results are still rendered in quirks mode.

IE7 beta2 solves this problem. It will skip the PROLOG and check doctype. Therefore, IE6 and earlier versions may use quirks mode for rendering, while IE7 beta2 uses strict mode for rendering.

In fact, this problem is easy to solve. In the current environment, you can simply delete the Prolog, which is of no great use. Of course, if you want to pretend to be using XHTML, in fact, people who want to use quirks mode may have to think about a new method. ^_^

Hack techniques ineffective due to bug Improvement
* Html
This is an hack that uses the IE bug. The following statement only uses IE to parse the content:

* HTML {...} * html body {...} Now IE beta2 will ignore them together with the large army.

Underline hack
This is also an hack that uses the IE bug. The following statement only uses IE to parse the content:

. Myclass {
Min-Height: 300px;
_ Height: 300px;
} Now IE beta2 does not parse the attribute starting with an underscore, but treats it as a "user-defined" attribute. Custom Attributes cannot be applied to performance, but they are stored in the document model and can be accessed using scripts. (I have not tested this feature yet)

/**/Comment on hack
This is one of my favorite hack skills. The following statement is used in strict mode to make IE6 transparent (ie5.x will be parsed), but IE7 beta2 will parse it now:

. Myclass {
Height/**/: 300px;
} Hack techniques that fail due to enhancement
In the past, ie did not support the following statement, but now we can:

Child selector hack
HTML> body {
Height: 300px;
} Adjacent selector hack
Head + body {
Height: 300px;
} Adjacent selector and first-Child pseudo-class selector
Head: First-Child + body {
Height: 300px;
} None of these are bad messages. I never use these hack logs. ^

What should I do if my page is messy?
In the msdn article, some solutions are provided. From my perspective, they are all solutions for temporary and temporary problems. Do not use Js for CSS work, or load specific CSS only for IE. So we suggest you: Wait! The official version of IE7 may change everything before the official version is released. Second-class great CSSCommunityFind out more hack skills. IE7 cannot be exactly the same as ff, nor is it exactly the same as IE6. It will always be a bit different, just use the different things for hack.

Although using various hack is helpless, the reality is that we are trying to adapt to this industry while trying to influence it, in private, we hope to see the hack named after the Chinese people.

fight!
superadmin
CSS compatibility between IE and Firefox 1. doctype affects CSS processing
2.ff: Div sets margin-left, and margin-right is centered when it is set to auto. ie does not work.
3.ff: when text-align is set to body, div needs to set margin: auto (mainly margin-left, margin-right) to center
4.ff: after padding is set, div will increase the height and width, but IE will not, so we need to use it! Set the height and width of important.
5.ff: supported! Important, ie is ignored, available! Important sets a special style for ff. It is worth noting that you must set XXXX! Important is placed on the other sentence
6.div vertical center problem: vertical-align: middle; Increase the line spacing to the same height as the entire Div line-Height: 200px; then insert the text to center vertically. The disadvantage is that you need to control the content rather than line feed.
7. cursor: pointer can display the cursor finger shape in IE ff at the same time. hand only Ie can
8.ff: link with border and background color. You need to set display: block and float: left ensures no line breaks. Refer to menubar to set the height of a and menubar to avoid misplacement of the bottom side. If no height is set, you can insert a space 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 ;}< br> note that the order of the two margin cannot be reversed. According to Alibaba Cloud! The important attribute ie cannot be identified, but other browsers can. Therefore, in IE, it is actually interpreted as follows: div {maring: 30px; margin: 28px}
if the definition is repeated, it is executed according to the last one. Therefore, you cannot write only margin: xxpx! Important;

10. The box interpretations of ie5 and IE6 are inconsistent.
Div {width: 300px; margin: 0 10px 0 10px;} under ie5 ;}
The DIV width is interpreted as 300px-10px (right fill)-10px (left fill). The final Div width is 280px, in IE6 and other browsers, the width is calculated based on 300px + 10px (right fill) + 10px (left fill) = 320px. In this case, we can modify Div {width: 300px as follows! Important; width/**/: 340px; margin: 0 10px 0 10px}
I don't quite understand what/**/is. I only know that both ie5 and Firefox support it, but IE6 does not. If anyone understands it, please let me know. Thank you! :)

11. UL labels have padding values by default in Mozilla, while in IE, only margin has a value. Therefore, UL {margin: 0; padding: 0;} is defined first ;}
Most problems can be solved.

Note:

1. The DIV of float must be closed.

For example: (floata and floatb attributes have been set to float: Left;) <# Div id = \ "floata \">
<# Div id = \ "floatb \">
<# Div id = \ "notfloatc \">
The notfloatc here does not want to continue translation, but wants to move down.
This code has no problem in IE, and the problem lies in ff. The reason is that notfloatc is not a float label and must be closed.
In the <# 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 must be at the same level as two DIV with the float attribute. No nested relationship exists between them; otherwise, an exception may occur.
And define the clear style as follows:. Clear {
Clear: Both ;}
In addition, in order to automatically adapt to the height, overflow: hidden should be added to the wrapper;
When a box containing float is automatically adapted to the IE environment, the private attribute layout of IE should be triggered (the Internet Explorer !) Zoom: 1; can be used 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 DIV set to float doubles the margin set in IE. This is a bug in IE6.
The solution is to add the display: inline In the div;
For example:
<# Div id = \ "imfloat \">

The corresponding CSS is
# Iamfloat {
Float: left;
Margin: 5px;/* 10 Px in IE */
Display: inline;/* in IE, It is understood as 5px */}

3. Container inclusion relationships

In many cases, especially when the container has a parallel layout, such as two or three float Divs, the width is prone to problems. In ie, the width of the outer layer is broken by the DIV with a wider inner layer. You must use Photoshop or firework to obtain pixel-level precision.

4. Questions about height

If the content is added dynamically, it is best not to define the height. The browser can automatically scale. However, it is best to set the height of static content. (It seems that sometimes it will not be automatically pushed down and I don't know what's going on)

5. the most cruel means -! Important;

If there is no way to solve some detailed problems, you can use this method. FF "! Important "will automatically give priority to resolution, but IE will ignore. 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 must be added! Important is placed on the other sentence, which has been mentioned above
Superadmin 2007-9-15
CSS is compatible with IE6, IE7, and Firefox. The first method is CSS hack.

Height: 20px;/* For Firefox */
* Height: 25px;/* For IE7 & IE6 */
_ Height: 20px;/* For IE6 */

Pay attention to the sequence.

This also belongs to CSS hack, but it is not as concise as above.
# Example {color: #333;}/* Moz */
* Html # example {color: #666;}/* IE6 */
* + Html # example {color: #999;}/* IE7 */

The second method is to use conditional annotations dedicated to IE.
<! -- Other browsers -->
<LINK rel = "stylesheet" type = "text/CSS" href = "css.css"/>

<! -- [If IE 7]>
<! -- Suitable for IE7 -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie7.css"/>
<! [Endif] -->

<! -- [If lte ie 6]>
<! -- Suitable for IE6 and later -->
<LINK rel = "stylesheet" type = "text/CSS" href = "ie.css"/>
<! [Endif] -->

The third method of CSS Filter is as follows ..

Create a CSS style as follows:

# Item {
Width: 200px;
Height: 200px;
Background: red;
}
Create a new Div and use the CSS style defined above:

<Div id = "item"> some text here </div>

Add the lang attribute in the body representation. The Chinese character is Zh:

<Body lang = "en">

Now define another style for the DIV element:

*: Lang (en) # item {
Background: Green! Important;
}

This is intended for use! Important overwrites the original CSS style. Because the Lang selector ie7.0 does not support this sentence, it does not have any effect on this sentence, so it achieves the same effect in ie6.0, unfortunately, Safari does not support this attribute, so you need to add the following CSS style:

# Item: Empty {
Background: Green! Important
}
: The empty selector is a css3 specification. Although safari does not support this specification, this element is still selected, whether or not this element exists, now green will be available in browsers other than IE versions.

For compatibility with IE6 and FF, consider the previous! Important

I personally prefer the first method, which is concise and compatible.

This seems like this:

# Example {color: #333;}/* Moz */
* # Example {color: #666;}/* IE6 */
* + # Example {color: #999;}/* IE7 */

And not concise ......
Superadmin 2007-9-15
CSS compatibility issues between IE and Firefox today use Firefox to open a blog ~~ The navigation on the right is completely different from that on IE.
Presumably, this is the compatibility problem between the two.

In fact, CSS 'width' refers to the width of the width in the standard CSS, and the width in Firefox is the width. It only contains the width of the content in the container. Internet Explorer 'width' indicates the width of the entire container, including content, padding, and border.
In Firefox: Container width = content width + padding width + Border Width
In ie: Content width = the container width you define (Internet Explorer 'width')-padding width-Border Width

Therefore, if width: 120px and padding: 5px are defined in IE, the displayed width is 120px.
That is, padding: 5px is in width.
In Firefox, the display width is 125 PX;
Therefore, we must define
Width: 115px! Important; width: 120px; padding: 5px;
Note that ,! Important; must be in front.