CSS compatibility debugging common situations and corresponding methods

First, CSS HACK

The following two methods can 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;

width:80px;

}

</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;}

*html #wrapper {width:80px;}

*+html #wrapper {width:60px;}

}

</style>

Attention:

*+html to IE7 hack must ensure that the HTML top has the following declaration:

<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" ">

Second, Universal float closed

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.

<style>

. clearfix:after

{

Content: ".";

Display:block;

height:0;

Clear:both;

Visibility:hidden;

}

. clearfix

{

Display:inline-block;

}

. clearfix {Display:block;}

</style>

Third, other compatibility skills

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 Vertical-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 hand only applies to IE.

1 CSS styles for Firefox IE6 IE7

Most are now using!important to hack, for IE6 and Firefox test can display normally,

But IE7 to!important can be correctly explained, will cause the page did not display as required! Find a needle

IE7 good 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;}

* HTML #1 {color: #666;}

*+html #1 {color: #999;}

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 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 is necessary to note that if you want to use this method to center the entire page, it is recommended that you do not put in a div, you can sequentially split a number of Div,

Just define the Margin-right:auto in each of the split div; 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+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;//can simulate a block element display:inline for inline elements;//Achieve the effect of the same row arrangement diplay:table;

IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This is a big problem, if you only use width and height,

In the normal browser these two values will not change, if only with min-width and min-height words, ie below is basically 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 does not 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: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.
Can also be written directly:
#container {min-width:600px; *width:600px;}
This will be achieved regardless of IE or FF is the minimum width of 600PX

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 it doesn't 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 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.

The following method is a method that is analyzed from another perspective:
Browser bug handling Method (part), for friends who like web design to share:
1. Asterisk *
IE can recognize *, standard browsers such as FF do not recognize *.
Example: p {color:yellow; *color:red;}
Similar to have
+ Plus
Only IE explained
p{color:red; +color:blue}
IE shows blue FF shows red
2.!important
IE6 and below will ignore this style, IE7 FF will support;
P{color:red!important;color:yellow;}
IE7 FF Displays the red IE6 yellow
Note here that the!important method is only IE6 and ignored after the above format, except that the method of improving the style weights can be generalized.
3. Underline.
IE6 and the following versions will apply this style, others will ignore
p{color:red; _color:blue}
4. Comments:
p {color:red};
This style can be applied in IE6, and will not be processed in IE5 and the following versions, so it can be differentiated for IE5/6
5. @IMPORT:
Using URLs to import styles in @import, the standard use is to enclose the values in the URL in quotation marks, as follows @import URL ("Newstyle.css"), which can be supported by the browser and FF above IE5, thus enabling the IE4 style to be handled separately.
In addition, there is one more way:
@IMPORT URL ("noie.css") screen;
Screen is an option for specifying the type of device, screens is used for display, print is used for printing devices but IE is not supported for this method, and all IE browsers can be distinguished by IE and ff.
6. Property selector: Used to select objects with specific attributes
Span[class=left]{color:blue}
span[title]{color:red;}
IE6 is not supported, but it works properly in FF, so it can be processed separately for IE and FF.
In the actual development, IE and FF are often processed separately, you can use the following code:
#content {
color:red;
}
[Xmlnx] #content {
Color:blue
}
This method I feel very practical, also often use, recommend friend use, if need more detailed explanation, I can post again.
7. Sub-object selectors:
Span>p{color:red}
IE6 is also not supported, also can be used to differentiate IE and FF
8. Tantek method
#content {
Color:blue;
voice-family: "\"}\ "";
Voice-family:inherit;
color:red;
}
The above code will not be parsed by IE5.5 and the following browsers after using voice-family color:red. Therefore, the text color on the IE6/7/FF will be rendered red, and will appear blue on the IE5.5 and the following browsers;
In addition, Voice-family also has a way of handling:
#content {
color:red;
voice-family: "}"
Voice-family:inherit;
Color:blue;
}
Using this method, IE6 and the following versions of the browser and FF browser text will be red, and IE5 and the following version of the browser is blue!
9. Escape attributes
p{w\idth:200px;}
IE5.5 The following will be ignored. Note: Backslash characters cannot appear in front of the 0-9 or letter A-f
10. Conditional annotations in IE
I. Introduction to Conditional annotations
The conditional annotation in IE (Conditional comments) has excellent distinguishing ability to IE's version and IE non ie, which is commonly used in web design.
Hack method.
Conditional annotations can only be used for IE5 or more.
If you install more than one IE, the conditional comment will be the highest version of IE as standard.
The basic structure of the conditional comment is the same as the HTML comment (<!––>). So browsers outside of IE will think of them as ordinary
Annotations and completely ignore them.
IE will determine whether the content in the conditional comment is parsed as if the normal page content is parsed, based on the IF condition.
Second, conditional annotation properties
Gt:greater than, select the condition version above, do not include the conditional version
Lt:less than, select the following version of the condition version, not including the conditional version
Gte:greater than or equal, select the condition version above, including the conditional version
Lte:less than or equal, select the following version of the condition version, including the conditional version
! : Select all versions except the condition version, regardless of high or low
Three, conditional comment use method
Note that the <> in the code is replaced by the corresponding greater than or less than sign in English
<!--[if IE 5]> only IE5.5 visible <! [endif]-->
<!--[if GT ie 5.5]> only IE 5.5 above visible <! [endif]-->
<!--[if it ie 5.5]> only IE 5.5 below visible <! [endif]-->
<!--[if GTE IE 5.5]>ie 5.5 and above visible <! [endif]-->
<!--[if ITE IE 5.5]>ie 5.5 and below visible <! [endif]--><!--[if! IE 5.5]> non IE 5.5 ie visible <! [EndIf]
-
The following code is a conditional comment that runs under a non-IE browser
<!--[if! ie]><!--> You are not using the Internet explorer<!--<! [endif]-->
<!--[if IE 6]><!--> You are using Internet Explorer version 6 or a non-ie browser <!--<! [endif]-

The following is a summary of the three methods of comprehensive solution:

The first type:

. div {
Backgroundrange;
*background:green!important;
*background:blue;

}

The second type:

. div {
margin:10px;
*margin:15px;
_margin:15px;
}

The third type:

#div {color: #333;}
* HTML #div {color: #666;}
*+html #div {color: #999;}

