CSS compatibility tips for individual browsers---hack tips

* Both IE6 and IE7 can be identified
_ Only IE6 can identify
Only IE8 can identify
: Root only IE9 can identify

It's a cliché that CSS is compatible with every browser, and the tutorials are all over the Web. The following content is not too many novel, purely personal summary, hoping to have some help for beginners.

First, CSS HACK

Hack concept:

Different browsers, such as Internet Explorer 6,internet Explorer 7,mozilla Firefox and so on, the parsing of CSS is not the same, it will result in the resulting page effect is different, not get the page effect we need. At this time we need to write different CSS for different browsers, so that it can be compatible with different browsers, can be in different browsers can also get the desired page effect. The process of writing different CSS code for different browsers is called CSS hack,

Hack rules:

IE can recognize *; standard browsers (such as FF) do not recognize *;

IE6 can recognize *, but not!important,

IE7 can recognize *, can also identify!important;

FF does not recognize *, but can identify!important;

IE6 IE7 FF

*√√x

!importantx√√

Browser priority: Ff<ie7<ie6,css Hack The writing order is generally FF IE7 IE6

Cases:

To: "#demo {width:100px;}" As an example;

#demo {width:100px;}

* HTML #demo {width:120px;}

*+html #demo {width:130px;}

---------------

So finally, #demo的宽度在三个浏览器的解释为:

firefox:100px;

ie6:120px;

ie7:130px; to

The next two approaches 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; /* IE7+FF */

width:80px; /* IE6 */

}

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

*html #wrapper {width:80px;}/* IE6 fixed */

*+html #wrapper {width:60px;}/* IE7 fixed, note order */

}

</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" "HTTP://WWW.W3.ORG/TR/HTML4/LOOSE.DTD" >

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>

/* 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>

Third, other compatibility skills

1.

UL tags in mozilla default is padding value, and in IE only margin has value. So define ul{margin:0;padding:0 first;} will be able to solve most of the problems. !important can also be used to solve

2. Center the 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)

You can put any item within the body of the HTML inside, and the item will automatically get the equal left and right boundary values to ensure the center display. However, this still has a problem in the browser version prior to IE6 and will not be centered, so you must modify the following:

Body {

Text-align:center;

}

#content {

Text-align:left;

width:700px;

margin:0 Auto;

}

The body of the setting will lead to the center of the content, but even all the text is also centered, this is probably not the effect you want, for this #content div also specify a value: Text-align:left

3. IE5 and IE6 's box explanations are inconsistent

IE5 under div{width:300px;margin:0 10px 0 10px;}

The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px,

The widths on IE6 and other browsers are calculated with 300px+10px (right padding) +10px (left padding) =320px.

At this point we can make the following changes div{width:300px!important;width:340px;margin:0 10px 0 10px}

About this is what I do not understand, only know IE5 and Firefox are supported but IE6 not support, if anyone understand, please tell me, thank you! ：）

4. The form label and the UL label's prior declaration

These 2 tags in IE, will automatically margin some margin, and in the FF margin is 0, therefore, if you want to display consistent, so it is best to specify the margin and padding in the CSS, for the above two issues, my CSS is generally first used in the style of UL, form{margin:0;padding:0;} The definition died, so the back will not be a headache for this.

5.

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

6.

If the text is too long, the too-long part becomes an ellipsis display: IE5,FF is invalid, but can be hidden, IE6 effective <div style= "width:120px;height:50px;border:1px solid Blue Overflow:hidden;text-overflow:ellipsis "> <NOBR> is like a line of text, very long, a row in the table cannot be displayed. Phontol.com</nobr>

Fixed-width Chinese character truncation: overflow:hidden;text-overflow:ellipsis;white-space:nowrap; (however, only the truncation of text on one line can be processed, and multiple lines cannot be processed.) ) (IE5 above) FF cannot, it is only hidden.

7.

IE does not recognize the definition of min-, but in fact it treats the normal width and height as a condition of min. This problem is big, if only with the width and height, the normal browser of these two values will not change, if only with Min-width and min-height, ie, the following is 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;}

8. Double the 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's a look at block and inline two elements: The block element is characterized by always starting on new lines, height, width, row height, margin can be controlled (block elements); The inline element is characterized by an uncontrolled (inline element) on the same line as other elements;

#box {display:block;//can simulate a block element display:inline for inline elements;//Achieve the effect of the same row arrangement diplay:table;

10. Why the text in FF cannot open the height of the container

The container of fixed height value in standard browser is not open like IE6, then I want to fixed height, and want to be able to be open how to set it? The way is to remove height setting min-height:200px; Here in order to take care of the IE6 do not know min-height can be defined as:

{

Height:auto!important;

height:200px;

min-height:200px;

}

11. Clear Floating

. 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 {}

#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.

/*ie and Firefox's CSS compatibility Daquan */

1.DOCTYPE Impact CSS Processing

2.ff:div set Margin-left, Margin-right is auto when the center, IE No

3.ff:body when setting text-align, Div needs to set Margin:auto (mainly margin-left,margin-right) to center

4.FF: After setting padding, Div will increase height and width, but IE will not, so need to set a height and width with!important

5.FF: Support!important, IE is ignored, can be used!important for FF special setting style

6.div Vertical centering problem: vertical-align:middle; Increase the line spacing to as high as the whole Div line-height:200px; Then insert the text and center it vertically. The disadvantage is to control the content not to break the line

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

8.FF: Link with border and background color, need to set Display:block, and set Float:left guarantee does not break line. Refer to MenuBar, set a and menubar height is to avoid the bottom of the display dislocation, if not set height, you can insert a space in the menubar.

9. The difference between the box models in Mozilla Firefox and IE is inconsistent, resulting in 2px resolution:

div{margin:30px!important;margin:28px;}

Note that the order of the two margin must not be written in reverse, according to the statement!important this property IE is not recognized, but other browsers can be recognized. So under IE it is actually interpreted as:

DIV{MARING:30PX;MARGIN:28PX}

Repeat definition is executed according to the last one, so it is not possible to write only margin:xxpx!important;

10.ie5 and IE6 's box explanations are inconsistent.

IE5 under

div{width:300px;margin:0 10px 0 10px;}

The width of the div is interpreted as 300px-10px (right padding) -10px (left padding) The final div has a width of 280px, while the width on IE6 and other browsers is calculated as 300px+10px (right padding) +10px (left padding) =320px. At this point we can make the following changes

Div{width:300px!important;width/**/:340px;margin:0 10px 0 10px}

About this/**/is what I also do not understand, only know IE5 and Firefox support but IE6 not support, if anyone understand, please tell me, thank you! ：）

11.UL tags in mozilla default is padding value, and in IE, only margin has value, so first define

ul{margin:0;padding:0;}

Will solve most of the problems.

Precautions:

1. The div of float must be closed.

For example: (where the properties of Floata, FLOATB are already set to Float:left;)

< #div id= "Floata" ></#div >

< #div id= "FLOATB" ></#div >

< #div id= "NOTFLOATC" ></#div >

The NOTFLOATC here do not want to continue panning, but want to go down the line.

This code is no problem in IE, the problem is in FF. The reason is that NOTFLOATC is not a float label and the float label must be closed.

In

< #div class= "FLOATB" ></#div >

< #div class= "NOTFLOATC" ></#div >

Added between

< #div class= "clear" ></#div >

This div must be aware of the location of the declaration, must be placed in the most appropriate place, and must be two with a float attribute of the div sibling, there can be no nested relationship, otherwise it will produce an exception.

And the clear style is defined as follows:

. clear{

Clear:both;}

In addition, in order to allow the height can automatically adapt, to wrapper inside add Overflow:hidden;

When the box containing float, the height of automatic adaptation in IE invalid, this time should trigger the layout of IE private property (evil ie Ah!). ) with zoom:1, can be done, so that the compatibility is achieved.

For example a certain wrapper is defined as follows:

. colwrapper{

Overflow:hidden;

Zoom:1;

margin:5px Auto;}

2. Double the issue of margin.

A div set to float doubles the margin set under IE. This is a bug that exists in a IE6.

The solution is to add display:inline to this div;

For example:

< #div id= "imfloat" ></#div >

The corresponding CSS is

#IamFloat {

Float:left;

Margin:5px;/*ie understood as 10px*/

Display:inline;/*ie under the 5px*/}

3, about the containment of the container relationship

Many times, especially when there are parallel layouts in the container, such as two or three float's Div, the width is prone to problems. In IE, the width of the outer layer is broken by a wider div. Be sure to use Photoshop or firework to take pixel-level accuracy.

4, about the height of the problem

If you are adding content dynamically, it is best not to define it highly. The browser can automatically scale, but if it is static content, the height is best set. (Sometimes it doesn't seem to be going off automatically, not knowing what's going on)

5, the most ruthless means-!important;

If there is no way to solve some of the details, we can use this method. FF will automatically parse for "!important", but IE will be ignored.

. 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 */}

CSS compatibility tips for individual browsers---hack tips