CSS IE7 IE6 Firefox multi-browser compatibility

In an ideal environment, compiling correct CSS will work properly in every browser that supports CSS. Unfortunately, we are not living in the ideal world, and there are many bugs and inconsistencies in browsers. To create pages that display the same style in various browsers, CSS developers need to be creative. By using bugs (hack) and unimplemented CSS, developers can selectively apply different rules to different browsers. "Trick hack" and "filter" are powerful tools for CSS developers. However, you should be cautious when using it because of its powerful functions. It is really important to understand various common tricks and how they work. However, it is equally important to know when to apply them and when they should not be used.

I will talk about such things later.

1. The difference between the number of moves and the filter.
2. Good filters and bad filters and how to reuse them.
3. IE has conditional comments.
4. Asterisk HTML filter, star number, and plus sign HTML filter.
5. Comment out the backslash filters and the holly moves.
6. The backslash filter and the modified box model (msbmh) are simplified ).
7. ! Important and underline filters.
8. Subfilter and attribute Filter

Multi-browser compatibility is a tough task. In fact, there is no difficulty. For different browsers, use the above-mentioned method to properly write the style supported by different browsers, in this way, multiple browsers are in harmony. Even different operating systems can coexist harmoniously. Such as MAC and PC. Believe that you can overcome such difficulties. Multi-browser compatibility requires constant debugging and patience. I have previously written a bug (hack ,! Important) CSS can also perfectly support all browsers. Although it takes several days to debug the CSS of a page, it is not impossible to do this. In fact, it is still an old saying that there is no difficulty in the world, just afraid of people with heart.

Certificate --------------------------------------------------------------------------------------------------------------------------------------------------------------

Hack and filter are actually a method to do this. Don't take a few tricks and start to show off and write around. Although they can achieve your initial goal. Don't take a look at your CSS files when they are finished. It seems that there are hack and patches everywhere. It seems that CSS has been customized for every browser. When using hack and filters, we should actually better understand the CSS standard specifications. In fact, there are very few cases of using hack. The word "hack" does not contain positive meanings, but rather uses incorrect browser behaviors.

As a general rule, it may be safer to use CSS filters that are not supported since they are used, rather than filter that relies on a browser bug.

Compared with the relatively advanced browser application rules and life, it can be confirmed that the old browser will degrade smoothly. When the new version of the browser is released, if it now supports CSS that you use as a filter, it should work as expected. Because browsers are becoming more and more compliant with standards, if you use advanced CSS to overcome problems in older browsers, this problem is expected to be solved in the new version. Therefore, using unsupported CSS as a filter mechanism is a relatively safe method. The reason for saying "relative" is that the browser may support new CSS, but it still shows the bug you are trying to fix.

Because using a filter that relies on Parsing bugs is a bit risky. This is because it depends on bugs rather than features. Similar to the previous method, if the resolution bug is fixed and the bug you are trying to fix has not been resolved, you may encounter a problem. However, what's more serious is that parsing bugs may have new forms of expression in the new version of the browser. For example, assume that a new version of Firefox has a parsing bug. If you use this bug as a filter to provide different width values to IE to solve the special box model problem, Firefox may suddenly inherit this width, which may damage the design of many sites.

In CSS, there are many ways to achieve the same effect, so if something causes a problem, you can try another method. Many CSS errors are overly complicated.CodeAnd mark. If you keep the code simple, you can avoid using most of the hack.

So what policies should be used to ensure that the CSS of a website is simple and clear and can be adapted to many browsers? If you think deeply and realize that you can only apply a certain type of hack or filter, you need to apply it in a wise and controllable way. If CSS is short and simple, and you only need to apply a few hack, it may be safe to put these hack in the main CSS file. However, hack is often quite complex, making the code more difficult. If the CSS file is very long, or you need to use more tricks, you 'd better place them in their own style sheets. This not only makes the code easy to read, but if Hack creates any problems in the new browser, it can be accurately located. Similarly, if you decide to cancel the support for a browser, you only need to delete the appropriate CSS file to delete the associated hack. Or useProgramDetermine the browser information, and then link the corresponding CSS file. Alternatively, you can use conditional comments (see the next article ).

This site (http://centricle.com/ref/css/filters/) is recommended to help you select the correct filter or hack ). This site provides a table to describe the filters that are valid in those browsers, which is very detailed.

Matching diagram of common hack browsers:

Certificate --------------------------------------------------------------------------------------------------------------------------------------------------------------

Condition note:

Conditional annotation is a special Microsoft extension (because it is not standard) for regular (x) HTML annotations. As the name suggests, conditional comments allow you to display code blocks based on conditions (such as the browser version. Because non-standard, conditional comments appear as regular comments for all other browsers, they are essentially harmless. Conditional comments appear for the first time in ie5 on Windows and are supported by all subsequent versions of Windows browsers.

To give a specific style sheet to ie5, IE6, IE7, or a later version, you can place the code at the beginning of the (x) HTML document:

<! -- [If IE]
<Style type = "text/CSS">
@ Import ("ie.css ");
</Style>
-->

The ie5and later versions on Windows will receive the sample table ie.css, while all other browsers will only see some commented-out text. You can use conditional annotations to specify a specific browser, such as ie6.0.

<! -- [If IE 6]
<Style type = "text/CSS">
@ Import ("ie60.css ");
</Style>
-->

You can also specify a set of browsers, such as ie5.5 and later versions:

<! -- [If GTE ie 5.5000]
<Style type = "text/CSS">
@ Import ("ie55up.css ");
</Style>
-->

Or IE7

<! -- [If it IE 7]
<Style type = "text/CSS">
@ Import ("ie70.css ");
</Style>
-->

This method is extremely effective and easy to remember. The main confirmation is that these annotations need to be placed in HTML rather than CSS. If you want to stop supporting a browser at a certain stage, you need to delete comments from each page. Of course, this is only for websites on static pages. If you are a dynamic website, it is convenient to modify CSS as part of a dynamic call. If you think it is not good, let's look at another filter tantek Celik in the next article.

Certificate --------------------------------------------------------------------------------------------------------------------------------------------------------------

Band-pass filter of tantek Celik:

Tantek Celik creates a series of filters (http://tantek.com/css/examples/) based on browser resolution errors that allow the use of @ import rules to provide the style sheet to the selected browser. Because they are CSS rules, all these filters can be placed in a CSS file, so that you can control the filtered files in another place. Isolate the trick hack into a specific CSS file in the browser, which greatly simplifies the management of the trick hack. If you decide to stop the support for a browser (such as IE 5.0), you only need to delete the relevant style sheet, and do not need to search and modify a large number of page codes.

Note:/**/is the comment format in CSS. In fact, all the filtering methods mentioned below are mixed effects of/**/annotation and \ escape.

To pass CSS files to ie5.5 and ie5 on Windows, you can use tantek's central filter:

@ Media tty {
I {content: "\";/* "" */} @ import 'ie5x.css ';/*";}
}

This filter looks like a bunch of meaningless rules, and does this for many browsers. Browsers that only understand CSS 1 do not know the @ media rule, so they ignore it completely. A more powerful browser will see a declaration in the @ media rule, whose goal is to find the <I> element. Because there is an escape character before the second quotation mark, the value of the content attribute is considered as a meaningless string. Basically, modern browsers will see the following rule:

@ Media tty {
I {content: "Blah, blah ";}
}

The escape character is a reserved character (usually a backslash), which causes the parser to ignore the subsequent reserved characters. Therefore, if you want to use the CSS content attribute to automatically generate a quotation mark, you must escape it; otherwise, it will end the quotation mark:
BLOCKQUOTE: Before {content: "\"}

Tty media type refers to the terminal and telex printer. Currently, no devices support this type of media. Therefore, browsers that comply with the standard will ignore the entire rule.

However, ie5.x/Windows does not understand the transfer character, so the content declaration will be terminated in advance. The <I> and @ media rules are ended, which causes the @ import rule to be applied. All more characters are commented out, So Ie 5.x/ win seems that the entire rule is as follows:

@ Media tty {
I {content: "Blah ";
/* Blah */
}
}
@ Import 'ie5x.css'
/* Blah */

This is complicated, but fortunately, you don't need to know how these filters work. You just need to know how to use them.

To provide CSS files to a specific version of IE 5.x/ win, two variants of the zhongtong filter were created and they exploited various bugs in these specific browsers. These filters are called ie 5/Windows band-pass filters:

@ Media tty {
I {content: "\";/* "" */}; @ import 'ie50win.css ';{;}/*";}
}/**/

And IE 5.5/Windows band-pass filter}

@ Media tty {
I {content: "\";/* "*/} @ M; @ import 'ie55win.css ';/*;}
}

Another possibility is to explicitly specify the Internet Explorer 5.2 on Mac. To this end, you can use tantek's ie5/MAC band-pass filter, which uses another escape bug, this time in the comment:

/*\*//*/
@ Import “ie5mac.css ";
/**/

IE 5/MAC mistakenly escapes the second asterisk, causing the @ import rule to be applied. Therefore, ie5/Mac will see the following rule:
/* Blah */
@ Import “ie5mac.css ";
/**/

All other browsers correctly ignore the escape element because it is put in a comment and the @ import rule is commented out. All other browsers will see the following rules (in fact, there are no rules)

/* Blah *//*
Blah
*/

Like other band-pass filters, you can directly use this filter without understanding how it works. What makes these filters good is that They cleverly exploit bugs in older browsers. Therefore, they should be safe to use, and they should not cause problems in new browsers.

Certificate --------------------------------------------------------------------------------------------------------------------------------------------------------------

Sub-selector (hack) and attribute selector:

Hack) 

The safest filter depends on unimplemented CSS, rather than browser bugs. Because these filters use valid CSS selectors to apply valid declarations, strictly speaking they are not filters at all. They are only valid CSS rules that some browsers cannot understand. The first of these filters is called the sub-Selector trick. Internet Explorer 6 and earlier versions on Windows do not support sub-selectors, so you can use it to hide rules for these browsers. To enable this filter to function, make sure that there is no space before and after the sub-selector.

In this example, the sub-Selector hack is used to hide the transparent Beijing PNG Image in IE 5-6/win.

HTML> body {
Background-image :( bg.png)
}

IE7 is expected to support sub-selectors and PNG transparency. By using the sub-selector in this way, the new version of IE can see the transparent background without modifying the code, thus providing forward compatibility. Like ie5, i56 turned a blind eye, while IE7 can be used properly. Here it is not compatible with multiple browsers, but forward compatibility.

Property selector (hack)

Another interesting method of filter rules is to use the attribute selector. Many current browsers (such as safari-Mac Apple and Firefox IE7) Support attribute selector, but IE6 does not support it. Therefore, you can use the property selector to apply a style to the class and ID in a more advanced browser. In this example, use the property selector to apply the background PNG to the content DIV in a compliant browser:

Div [ID = "content"] {
Background=url(bg.png );
}

You can use these methods to display different effects in different browsers. Of course, you can also use them to display the same effect in multiple browsers.

Certificate --------------------------------------------------------------------------------------------------------------------------------------------------------------

The famous asterisk * HTML hack (trick ):

One of the most famous and useful CSS filters for making IE7, IE6, and Firefox compatible with CSS is the asterisk * HTML hack. This filter is easy to remember and can be used for IE6 and earlier versions. As you know, HTML elements are considered to be the first element on the webpage, that is, the root element. However, all current versions of IE have an anonymous root element, which is surrounded by HTML elements. So what is this anonymous element or hidden element? In fact, it is the most famous *, so we can use the asterisk to specify the rules applied to those HTML surrounded by the asterisk.

IE6 and older ie5.5

* HTML {
Font-size: small;
}

In any non-IE browser, because there is no such rule (the HTML element is surrounded by the * sign), other browsers will be invisible, so when you specify this rule, you can rest assured that the application will be displayed in IE6 and ie5.5 of the previous version. IE 7 does not completely remove this hack. Instead, we use this method for filtering, that is, using * +

IE7

* + HTML {
Font-size: Small
}

This expression means that except IE7 can recognize this font-size: small, other browsers will not see this one. It can be said that this is the exclusive hack of IE7.

This method can be written in the same CSS file, and will produce unique effects for different browsers at the same time. Therefore, when designing pages or styles, you may wish to use Firefox as the first browser. After writing the style against Firefox, you can put the page under IE7 for proper adjustments, put it under IE6 and make appropriate adjustments. Basically, IE6 IE7 rules are nested in the <div> <ul> <li> </LI> </ul> sequence. After the IE6 style is adjusted, the IE7 style is adjusted, and vice versa. Furthermore, writing styles using Firefox is more in line with W3C, because IE6 and IE7 have to make some concessions on the specifications to achieve compatibility. Although everyone hates why one more Firefox is available, there is no way to do this :(. You need to control it, rather than being controlled by it ^_^.

After using asterisks to get IE6, IE7, and Firefox, browsers like opera will also display normally. They don't have to worry about their compatibility issues.

Certificate --------------------------------------------------------------------------------------------------------------------------------------------------------------

Compatibility summary:

CSS compatibility with various browsers has become a common issue, and Web tutorials are everywhere. the following content is not too novel and is purely personal summary. I hope it will be helpful to beginners. more Patient debugging will certainly help you learn a lot of good things.

I. CSS hack
The following two methods can solve almost all today's hack.

1 ,! Important (not recommended. Use the following one to feel the safest)

With IE7! Important Support ,! The important method is only for the hack of IE6. (note the writing method. Remember to advance the declaration position .)

Code:

<Style>
# Wrapper {
Width: 100px! Important;/* IE7 + FF */
Width: 80px;/* IE6 */
}
</Style>

2, IE6/ie77 for firefox <from CSS style for Firefox IE6 IE7>

* + HTML and * HTML are unique tags of IE, which are not supported by Firefox at the moment. * + HTML is also a unique tag of IE7.

Code:

<Style>
# Wrapper {width: 120px;}/* Firefox */
* Html # wrapper {width: 80px;}/* IE6 fixed */
* + Html # wrapper {width: 60px;}/* IE7 fixed, pay attention to the Order */
</Style>

Note:
* + The HTML hack for IE7 must ensure that the following statements are made on the top of the HTML:

Code:

<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd">

2. Universal float closure (very important !) You can use this to solve the incorrect spacing when multiple Div alignment occurs,

For details about the principle of clear float, refer to [How to clear floats without structural markup]
Add the following code to global CSS and add class = "Clearfix" to the DIV to be closed.

Code:

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

3. Other compatibility skills (useful)

1. Setting padding for Div under FF will increase the width and height, but IE will not. (available! Important solution)
2. center problem.
1). Vertical center. Set line-height to the same height of the current Div, and then use vertical-align: middle. (Note that do not wrap the content .)
2). horizontal center. Margin: 0 auto; (of course not omnipotent)
3. To add a style to the content of tag a, set display: block)
4. The difference between FF and IE in understanding box leads to the 2px difference. There are also issues such as Div set to float and margin doubling under IE.
5. UL labels are listed-style and padding by default under ff. It is recommended to declare them in advance to avoid unnecessary troubles. (commonly seen in navigation labels and content lists)
6. Do not set the height of the external wrapper Div. It is best to add overflow: hidden to achieve highly adaptive.
7. for hand-shaped cursor. cursor: pointer. And hand only applies to IE. Pasting code:

Compatible code: the most recommended hack mode.

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