Common situations and solutions for CSS compatibility debugging

CSS compatible debugging common situation and the corresponding method, reading CSS compatible debugging common situation and the corresponding method, a CSS hack the following two methods can almost solve all the Hack.1,!important with IE7!important support,!important Method is now only for IE6 hack. (Note the wording. Remember that the claim position needs to be advanced.)

CSS HACK

The following two approaches solve almost all hack today.

1,!important

With the support of IE7 to!important, the!important method now only targets IE6 hack. (Note the wording. Remember that the claim position 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 IE7 unique label.

<style>

#wrapper

{

#wrapper {width:120px;}

*html #wrapper {width:80px}

*+html #wrapper {width:60px}

}

</style>

Note:

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

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

Universal Float closure

The principle of clear float can be found in [how to clear floats without structural Markup]

Add the following code to the global CSS, to the need to close the div plus class= "clearfix" can be, once and for all.

<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, under the FF to the DIV set padding will cause the width and height increase, but IE will not. (Available!important solution)

2, center problem.

1. Vertically centered. Set the line-height to the same height as the current Div, and then pass the Vertical-align:middle. (Note that the content is not wrapped.)

2). Horizontally centered. margin:0 Auto;

3, if need to add a style to the content of a label, need to set display:block;

4, FF and IE on the BOX understanding of the difference between the 2px is also set for float div in IE under the margin doubling and so on.

5, the UL label under the FF default has List-style and padding. It is best to make a statement beforehand to avoid unnecessary trouble. (Common in navigation labels and content lists)

6, as an external wrappers div do not set dead height, preferably plus overflow:hidden. To achieve a high degree of adaptability.

7, about the hand-shaped cursor. Cursor:pointer. And hand only applies to IE.

1 CSS styles for Firefox IE6 IE7

Now most of them are using!important to hack, and for IE6 and Firefox tests to be shown,

But IE7 to!important can correctly explain, will cause the page does not appear according to the request! Find a needle

To IE7 good hack way is to use "*+html", now with IE7 browsing, should have no problem.

Now write a CSS can do this:

#1 {color: #333;}

* HTML #1 {color: #666;}

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

Then under Firefox font color display for #333,ie6 under the font color display for #666,ie7 under the font color display as #999.

2 centering problems in CSS layouts

The main style definitions are as follows:

body {text-align:center;}

#center {Margin-right:auto; Margin-left:auto; }

Description：

First, the parent element defines text-align:center, which means that the content within the parent element is centered;

But you can't center in Mozilla. The solution is to add "Margin-right:auto" when the child element definition is set; Margin-left:auto; ”

To be sure, if you want to use this method to make the entire page centered, it is recommended not to be nested in a div, you can split out multiple Div,

Just define the Margin-right:auto in each div that is removed; Margin-left:auto; .

3 box models different interpretations

#box {width:600px//for ie6.0-width: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 from 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}

Let's go over the block,inline. Two elements, the block element is characterized by: always start on a new line, height, width, row height, margin can be controlled (blocks elements); Inline element is characterized by: and other elements on the same line,... Uncontrollable (inline element);

#box {display:block//can simulate an inline element as a block element display:inline//effect diplay:table the same row arrangement;

IE does not recognize the definition of min-, but in fact it treats the normal width and height as having min. That's a big problem, if you just use width and height,

In the normal browser, these two values will not change, if only with Min-width and min-height, ie below is not set width and height.

For example, to set the background picture, this width is more important. To solve this problem, you can do this:

#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 specifies that the element should be minimal or less than a certain width, so that the layout will always be correct. But IE doesn't recognize this,

And it actually turns the width to the minimum. To make this command available on IE, you can place a <div> under the <body> tab and assign a class to the 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 only IE recognizes, which makes your HTML document less formal. It actually achieves the minimum width through JavaScript's judgment.