Use different CSS styles in different browsers to solve browser compatibility issues

Let CSS distinguish between different browsers
Distinguish between different browsers, CSS hack notation:

Difference between IE6 and FF:
Background:orange;*background:blue;

Difference between IE6 and IE7:
Background:green!important;background:blue;

Difference between IE7 and FF:
Background:orange; *background:green;
How to make different browsers call different CSS styles
x because of the degree of support for the standards, often lead to the same CSS style sheet in a variety of web browser rendering is very different. In the case of Microsoft Internet Explorer and Mozilla Firefox, the two browsers that currently have the highest market share, the former is significantly less supportive of standards than the latter. Web designers have had to spend a lot of time and effort tweaking the code to keep the Web page consistent in both-it's a very painful thing to do, and forgotten how happens. But it would be unwise to give up on either side, with the Arctic Ice blog, where visitors account for 49.57% of all visitors, and 46.78% for Firefox, giving up half of their visitors.
Therefore, it is most important to use simple methods to ensure consistency of Web page display.
The first method. In the same CSS style sheet, use!important to define different values to accommodate Firefox and IE, for example:
padding:20px!important; /for firefox/
padding:10px; /for ie/

(Note that IE6 here is unrecognized!important, but it will recognize padding:20px, so add padding:10px to cover padding:20px)
This method is useful for modifying a small amount of code.
Example one:
CSS Box {

Color:red!important;
 Color:blue;

}
HTML in different browsers, the color of this line of words should be different.

This example should be commonly seen in the use of important, in the IE6 environment, the line is blue, in IE7 and Firefox, Red. This is because IE6 does not recognize important (that is, he does not recognize!importmant but!important the previous color:red), and Color:blue is placed behind color:red (the following CSS definition overrides the previous color: Red), so the word in IE6 is blue, and the important level in IE7 and Firefox is preferred, so color:red!important; and Color:blue; In IE7 and Firefox under Red with blue who first who has no relationship.

The second method. The conditional comment. (only valid for IE browser) This is also the current method used by the Arctic ice tribe. First write the respective CSS styles for different browsers, and then add the following code to the head to accommodate the different versions of the IE browser:










Attention:
Gt:greater than (above)
Lte:less than or equal to (less than or equal to)
In addition: IE also supports a non-standard tag: Comment

This is not an Internet Explorer.

This is Internet Explorer.
IE automatically treats the contents of this tag as comments.
To say so many ways, is actually a kind of helpless or compromise
resolving different browser CSS issues
Previous/Next 2008-05-20 00:29:35
View (43)/COMMENT (0)/rating (0/0)
Use different CSS in different browsers
1:javascript. Judging different browser types to invoke unused CSS
Followed by comments
Somenode

{
position:fixed;
#position: fixed;
_position:fixed;
}
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, with this principle, can do not introduce JavaScript code (only with IE6 expression), I have a ready-made page, CSS is as follows: ff-r

{
position:fixed;
_position:absolute;
right:15px;
top:15px;
_top:expression (eval (Document.compatmode &&
document.compatmode== ' Css1compat ')?
DOCUMENTELEMENT.SCROLLTOP+15:
Document.body.scrollTop +
(Document.body.clientHeight
-this.clientheight));
}
You are here: Home > Web Authoring > CSS Tutorials > Hack source for IE8 's official version: Internet Author: anon time: 07-01 12:23:36 "Big small" comments: IE8 official version out there is a log, but for the IE8 of the official version of C SS hack but very few, in fact, this is fortunate, because IE8 fixed a lot of IE6 and IE7 some bugs, more close to the standard. For the IE8 of the official version of the CSS hack can now be found in 2 kinds: The first: "9″: The basic way: Test {color/*/: Blue9}ie8 The official version out there is a log, but for the IE8 of the official version of the CSS hack is very few, in fact, it is fortunate, Because IE8 fixed a lot of IE6 and IE7 bug, more close to the standard.
There are 2 types of CSS hack currently available for IE8 's full version:
The first type: "/9″:
The basic wording:
Test {color//*/: BLUE/9}
This IE6, IE7, IE8 can be identified, but IE8 does not recognize the "*" and "_" CSS hack; so we can write hack:
header {width:300px;}/* All browsers */
header {WIDTH//*/:330PX/9;}/* All browsers IE browser */
header {width:310px;}/IE7 and IE6 can be identified, IE8 and FF are not recognized */
header {_width:290px;}/* IE6 recognized, IE7, IE8, and FF do not recognize */
The second kind: The conditional comment that uses IE
Specific can be viewed here: http://www.css88.com/archives/705;
Some other tests for CSS hack:
color1{color: #F00; color///: #00F/}/IE6,IE7,IE8,FF,OP,SA identification/
color2{color: #F00; color///: #00F//9/}/IE7,IE8,FF,OP,SA identification/
color3{color: #F00; color//*/: #00F/9}/ie6,ie7,ie8 recognition/
color4{color: #F00; color///: #00F/9}/*ie7,ie8 recognitionThere is a space between "color" and "///" * *
Where: op means opera,sa for safari;
Reference reading:
http://ladysign-apps.com/blog/archives/529
http://webdevelop.nitamihai.com/ie8-css-hack/
Content from: Scripting House www.jb51.net
IE conditional comment "reprint"
Posted on:26-03-2009 | By: Fool's Wharf | In: (x) html+css 2
Conditional annotations are a unique feature of IE that can be processed separately for the IE series, paying attention to XHTML rather than CSS.
The conditional annotations feature is very powerful and can be judged by true and false, for example:
Program code
iamfloat{

Float:left;
Margin:5px;/*ie understood as 10px*/
Display:inline;/*ie under the understanding as 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 */}
It should be noted that the XXXX!important must be placed on the other sentence above, has mentioned
IE7.0 out, the support for CSS has new problems. Browser more, page compatibility worse, tired or we, in order to solve IE7.0 compatibility problems, find the following article:
Now I mostly use!important to hack, for IE6 and Firefox test can display normally, but IE7 to!important can explain correctly, will cause the page does not appear as required. Search for a bit, find a good hack way for IE7 is to use "*+html", now with IE7 browsing, there should be no problem.
Now write a CSS that can do this:Example {color: #333;}/* Moz * /HTML #example {color: #666;}/* IE6 */
+html #example {color: #999;}/IE7 */
Then in Firefox font color display as #333,ie6 under the font color display as #666,ie7 under the font color display as #999, they do not interfere. I wish the garbage IE6 to retire soon.
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.)
CSS Code
Wrapper {

width:100px!important; /* IE7+FF */
width:80px;/* IE6 */

}

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.
CSS Code
wrapper {width:120px;}/* FireFox * /

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

Attention:
*+html to IE7 hack must ensure that the HTML top has the following declaration:
xml/html Code
1.
Second, Universal float closed (very important!)
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.
CSS Code

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

Third, other compatibility skills (again verbose)
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.
Paste the CSS code:
/* FF */
. Submitbutton {
Float:left;
width:40px;
height:57px;
margin-top:24px;
margin-right:12px;
}
/* IE6 */
*html. Submitbutton {margin-top:21px;}
/* IE7 */
*+html. Submitbutton {margin-top:21px;}
Posted on 2008-06-26 09:50 boringlamb Read (178) Comments (0) Edit favorite Net pick Category: ASP.
When we use CSS to build Web pages, the difference between IE6 and Firefox can be solved with!important (this method is as small as possible), but IE7 seems to still do not know!important, and there are some differences between it and IE6. The inconsistency of the browser always makes people very headache.
The following shows the hack code for IE6/IE7/FIREFOX, respectively:Example {color: #333;}/* Firefox */HTML #example {color: #666;}/* IE6 */
+html #example {color: #999;}/IE7 */
Then in Firefox font color display as #333,ie6 under the font color display as #666,ie7 under the font color display as #999, they do not interfere with each other.

Ie6,ie7,firefox CSS-compatible workarounds and CSS differences (2008-05-08 15:29:51) Tags: talk
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.)
wrapper

{
Width:100px!important;
width:80px;
}

2, Ie6/ie7 to Firefox
+html and *html is the unique label of IE, Firefox is not supported. And +html is a special label for IE7.
wrapper

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

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

Second, Universal float closed (very important!)
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.

. clearfix:after
{
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}
. clearfix
{
Display:inline-block;
}
. clearfix {Display:block;}
Third, other compatibility skills (again verbose)
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,
However, IE7 can interpret the!important correctly, which causes the page not to be displayed 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 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 floating IE generated double distance 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 for inline elements display:inline;//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 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, you can put one on the tab and then specify a class for the DIV:
Then the CSS is designed like this:

container{min-width:600px Width:expression_r (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 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
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.

IE6 IE7 FF
*√√x
!importantx√√ add another, underline "_", IE6 support underline, IE7 and Firefox do not support underline. So we can also distinguish Ie6,ie7,firefox background:orange;*background:green;_background:blue;