DIV+CSS Resolving IE6,IE7,IE8,FF compatibility issues

DIV+CSS Resolving IE6,IE7,IE8,FF compatibility issues
1.IE8 compatibility issues, this best deal, converted into IE7 compatible can be. Add the following piece of code to the head, and then as long as it is compatible under IE7, IE8 below is also compatible:
1.<metahttp-equivmetahttp-equiv= "x-ua-compatible" content= "ie=7"/>
2.
2.flaot floating caused IE6 double margin problem, this is the most common, but also best to deal with,!important solve, such as
Under the MARGIN-LEFT:10PX!IMPORTANT;/*IE7,IE8,FF is 10px*/;
The Margin-left:5px;/*ie6 property is written in 5PX, but the 10px is displayed.
3. Clear block display, this can solve the floating caused by the block, after the block, when the div background fill or fill in the picture, there will be a background break or a small difference. This compatibility appears not too much, I do now, only encountered two times, the method is in the presence of a compatible div css to write a display:block, or other properties, Chinese what meaning I do not know, my English is poor, but can achieve the desired effect, 6e "z+e%|8g#|
4. A lot of friends div+css, will appear, in IE several browsers are good, but in FF problem, with!important will IE7 do incompatible, very headache, in thinking, there is no way to do only under the FF, I used this method, I feel that the trial is bad, is to precede the attribute with a symbol such as: *, &,￥,#,@,-,+, the attribute is only IE browser is recognized, and FF is not recognized, the method is as follows (note the order of signed attributes and unsigned attributes)
HEIGHT:100PX;/*FF Display 100 High */
+height:120px;/*ie678 Display 120 High */
5. Sometimes, in the layout of the time, found that there is a div floating, the next div is to be shown below, the results ran above, the situation is generally below the FF will appear, the solution is to clear the floating, in the set of the div under the float plus a Div, CSS surface write a clear:both, as follows
1.<divstyledivstyle= "float:left;height:100px;width:500px;" >
2.<divstyledivstyle= "Clear:both;" >
3.<divstyledivstyle= "height:100px;width=300px" >
6. Then the center problem, this problem in the novice body a lot, the main reason is that the box model is not understanding, did not memorize the box model, if found that your page is not in the Bureau, I now know, there are several reasons:
1. One is no box, that is, a large div after the body of all the div to put up the one, you did not write.
2. You wrote it, but the width is useless. Absolute width: But with a relative width, want the bureau, must use absolute width. -
7. Extension: If I want to design at the time, achieve ie6,ie7,ff under three different effects, such as IE6 under the background red, IE7 under the blue FF Green, here, I have tried, can, with a compatible method (note the order, you can understand it well).
7l&t-o7k-a1i
Red in the BACKGROUND:RED;/*FF * *
+background:blue!important;/*ie7 shown below Blue */
+background:green;/*ie6 shown below is green */

IE6 IE7 IE8 FF browser CSS compatibility issues
IE6, IE7, IE8, FF browser CSS compatibility issues, originally IE6 and FF compatibility is very easy to solve. Add a IE7 will trouble point, the appearance of IE8 more headaches, the original HackIE7 method can not be used, how to do?
Fortunately, Microsoft has provided such a code:

1.<metahttp-equivmetahttp-equiv= "x-ua-compatible" content= "ie=7"/>
Put this piece of code into 1.background: #ffc;/* valid for Firefox */
2.*background: #ccc;/* Valid for IE7 */
3._background: #000,/* Only valid for IE6 */
Explain it:
Firefox can parse the first paragraph, the back of the two because the front with a special symbol "*" and "_", Firefox does not recognize, so only recognize background: #ffc, see is yellow;
IE7 before two short can recognize, with the final, so the final resolution is background: #ccc, see is gray;
IE6 Three can be recognized, and "_" This only IE6 can recognize, so the final resolution is _background: #000, see is black
is already the simplest and best understanding of the wording, if you are Google come in, I can be very responsible to tell you, this method is OK, I tested.
IE8 that part of the code compatible with 7 I have also tested, in my current Windos7 beta version of the IE8 is no problem, and later IE8 official version out of the tube no matter what you do not know.
PS: If you find that you have a problem with my writing, please check your HTML header to see if the contents of
1.<! Doctypehtmlpublic "-//w3c//dtdxhtml1.0transitional//en"
2.
3. "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
4.This is now a comparative specification of the wording, if you are using Dreamweaver to do the page, the default is this specification, remember, non-standard wording, compatibility cannot be guaranteed.

Solve IE6, IE7, Firefox compatible with the simplest csshack
It was a long time ago to see the solution, and finally found that the solution is very reliable. Of course, the only drawback is that every property has to go to hack, but in many practices I just use ' fix ' 1-2 properties.
The exact wording is easy:
1. #someNode
0.9
3.position:fixed;
4. #position: fixed;
5._position:fixed;
6.}
The first row for Firefox and other browsers to see
The second row to IE7 (probably later IE8, IE9 also so, who knows) look
Third row for IE6 and older versions look
The best application is to let IE6 also "support" position:fixed, and, in line with this principle, can not introduce JavaScript code (only with the IE6 expression), I have a ready-made page, CSS is written as follows:
1. #ff-R
0.9
3.position:fixed;
4._position:absolute;
5.right:15px;
6.top:15px;
7._top:expression (eval (document.compatmode&&
8.document.compatmode== ' Css1compat ')?
9.DOCUMENTELEMENT.SCROLLTOP+15:
10.document.body.scrolltop+
One. (document.body.clientHeight
12.-this.clientheight));
13.}

CSS Code
1.<style type= "Text/css" >
2. #body {
3.border:2px solid #00f; Properties of the/*FF */
4.border:2px solid #090 \9; /* Properties of IE6/7/8 */
5.border:2px solid #F90; /* IE8 Support */
6._border:2px solid #f00; Properties of the/*IE6 */
9.3
8.</style>

HTML code
1.<div id= "Body" >
2.<ul>
3.&LT;LI&GT;FF Blue Edge </li>
4.&LT;LI&GT;IE6 Red Edge </li>
5.<li>ie7 Green Edge </li>
6.&LT;LI&GT;IE8 Yellow Edge </li>
7.</ul>
8.</div>


Note: The CSS order can not be wrong, because FF does not know \9,\0,_ writing, so for the blue edge, \9 is the ie6,7,8 property, the following code does not rewrite the IE7 code, so IE7 green edge; In the same vein, the IE8 property is equivalent to rewriting the color, so IE8 is the yellow edge, _ is the IE6 attribute, overriding the color as a red edge.


Div Dislocation/Resolve IE6, IE7, IE8 style incompatibility issues
The problem of div dislocation in IE6

The use of "Float:left" div in IE8, IE7, there is no problem, IE6 down, there is a blank. This is because the kernel used by the IE6 by default adds the distance between the div to three px, so try to add "margin-left:-5px" to the style of the lower Div. or smaller.
Resolve IE7, IE8 style incompatibility issues

Method One, to add the following HTTP Meta-tag to the page:
<meta http-equiv= "x-ua-compatible" content= "Ie=emulateie7"/>

As soon as IE8 read this tag, it will automatically start the IE7 compatibility mode to ensure the full display of the page.

Method Two, for the entire Web site, add the following descriptor in IIS can have the same effect, of course, the scope is wider.

<?xml version= "1.0" encoding= "Utf-8"?>
<configuration>
<system.webServer>
<customHeaders>
<add name= "x-ua-compatible" value= "Ie=emulateie7" >
</customHeaders>
</system.webServer>
</configuration>


Resolve IE6, IE7, IE8 style incompatibility issues

Now we always have to consider some compatibility issues between browsers when we do Web pages. Recently in the project of making a short message platform. In the project development process let me encounter a headache is IE7 and IE8 incompatible. There are many ways to solve the problem. Now shared as follows:

If your page is IE7 compatible, and you don't want to make a lot of changes to your existing code, and you can use it in IE8, Microsoft claims that developers just need to add a line of code to the current IE7-compatible site to solve the problem, as follows:

CODE:

<meta http-equiv= "x-ua-compatible" content= "ie=7"/>



Fix CSS style compatibility issues with Firefox IE6 IE7

Do theme The most troublesome is the CSS style compatibility problem, because each browser to the different interpretation of CCS, resulting in the original IE7 can be normal display, but to the Firefox, IE6 and other browsers, but there are dislocation, sinking and other problems, had to be in Firefox, IE6, IE7 between the constant switch debugging, Sweat... Recently there are two browsers joined Googlechrome and IE8, a browser eminence seems hopeless, can only try to overcome compatibility issues. Finding an article that addresses compatibility issues is still very effective.

1 CSS styles for Firefox IE6 IE7

Now most are used!important to hack, for IE6 and Firefox test can display normally, but IE7 to!important can correctly explain, will cause the page did not display as required! Find a good for IE7 hack way is to use "*+html", now with IE7 browsing, should have no problem now write a CSS can do this:

#1 {color: #333;}/* Moz */

* HTML #1 {color: #666;}/* IE6 */

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

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 should be explained that if you want to use this method to make the whole page to center, it is recommended not to set in a Div, you can split the div in turn, as long as in each of the split Div defined margin-right:auto; Margin-left:auto; You can do it.

3 box model 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;

5 ie with width and height issues

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

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 doesn't 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:e&not;xpression (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.

7 Clear Float

. hackbox{

display:table;

Display an 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 does not affect the Ie/win browser. The most troublesome of these

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

That's 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]{}

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.



Note: 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;


1. Differentiate between IE and non-IE browsers
#tip {
Background:blue; /* Non IE background blue */
Background:red \9; /*ie6, IE7, IE8 background red */
}

2. Distinguishing Ie6,ie7,ie8,ff
"Distinguishing symbols": "\9", "*", "_"
"Example":
#tip {
Background:blue; /*firefox background turns blue */
Background:red \9; /*IE8 Background Turn red */
*background:black; /*IE7 background turns black */
_background:orange; /*IE6 Background Turn Orange */
}
"description": Because the IE series browser readable "\9", and IE6 and IE7 readable "*" (m font size), and IE6 can be identified "_" (bottom line), so you can write down in sequence, it will let the browser read correctly to understand the CSS syntax, So you can effectively differentiate between versions of IE and non-ie browsers (like Firefox, Opera, Google Chrome, Safari, etc.).

3. Distinguish between IE6, IE7, and Firefox (Method 1)
"Distinguishing symbols": "*", "_"
"Example":
#tip {
Background:blue; /*firefox background turns blue */
*background:black; /*IE7 background turns black */
_background:orange; /*IE6 Background Turn Orange */
}
"description": IE7 and IE6 readable "*" (m size), IE6 can read "_" (bottom line), but IE7 cannot read "_", as for Firefox (non-IE browser) is completely unable to identify "*" and "_", so you can differentiate between IE6, IE7, Firefox

4. Distinguish between IE6, IE7, and Firefox (Method 2)
"Distinguishing symbols": "*", "!important"
"Example":
#tip {
Background:blue; /*firefox background turns blue */
*background:green!important; /*IE7 Background Green */
*background:orange; /*IE6 Background Turn Orange */
}
"description": IE7 can identify "*" and "!important", but IE6 can only identify "*", but cannot recognize "!important", as for Firefox can read "!important" but not recognize "*" Therefore, this difference can be used to effectively separate IE6, IE7 and Firefox.

5. Distinguish between IE7 and Firefox
"Distinguishing symbols": "*", "!important"
"Example":
#tip {
Background:blue; /*firefox background turns blue */
*background:green!important; /*IE7 Background Green */
}
"description": Because Firefox can recognize "!important" but can't recognize "*", and IE7 can understand "*", "!important" at the same time, so two identification symbols can be isolated IE7 and Firefox.

6. Distinguishing between IE6 and IE7 (Method 1)
"Distinguishing symbols": "*", "_"
"Example":
#tip {
*background:black; /*IE7 background turns black */
_background:orange; /*IE6 Background Turn Orange */
}
"description": IE7 and IE6 can be identified "*" (m), but IE6 can identify "_" (bottom line), IE7 is not recognized, through the IE7 can not read the characteristics of "_" will be able to easily relax the difference between IE6 and IE7.

7. Distinguishing between IE6 and IE7 (Method 2)
"Distinguishing symbols": "!important"
"Example":
#tip {
Background:black!important; /*IE7 background turns black */
Background:orange; /*IE6 Background Turn Orange */
}
"description": Because IE7 can read "!important;" But IE6 but not, and the CSS reading step is from top to bottom, so IE6 read because the "!important" can not be recognized and jump directly to the next line to read the CSS, so the background color will appear orange color.

8. Distinguish between IE6 and Firefox
"Distinguishing symbols": "_"
"Example":
#tip {
Background:black; /*firefox background turns black */
_background:orange; /*IE6 Background Turn Orange */
}
"description": Because IE6 can identify "_" (bottom line), but Firefox is not, so you can use this difference to separate Firefox and IE6, effectively achieve CSS hack.

DIV+CSS Resolving IE6,IE7,IE8,FF compatibility issues