Shulou(Shulou.com)06/01 Report--

How to solve the problem of compatibility between browsers, in view of this problem, this article introduces the corresponding analysis and solutions in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Compatibility issues between browsers, the same HTML5 and CSS5 styles, but the browser performance is not the same.

First, what is the compatibility problem and what is the cause of the abnormality? How to make the browser display normally

Second, why do browsers have compatibility problems?

1, in the same browser, the older the version, the more bug exists, the newer the version, the less support for new tags and new attributes, the less new features.

2, different browsers, different core technologies, different standards, different ways of implementation, and the final effect is also different.

Third, the way to deal with the problem of compatibility.

One, do you want to do it?

1, from the point of view of the product, (the popularity of the product, the proportion of popular browsers, effect priority or basic function priority?

2, from the perspective of cost, (is it necessary to do some functions?)

Two, to what extent?

Http:/ / www.iis7.com/b/wzjk/

1, which browsers support those effects?

Three, how do you do that?

1, choose the technical framework according to the compatibility requirements, (jquery) and so on.

2. Choose compatible tools according to compatibility requirements: html5shiv,Respond.js,CSS Reset,normalize.css,Modernizr.js,postcss

3, conditional comments, CSS hack,js capability testing to do some patching.

Fourth, gradual enhancement and elegant degradation

1, progressive enhancement: build pages for low-version browsers, ensure basic functions, interact with higher-version browsers, and add functions to achieve the best user experience.

2, elegant downgrade: construct the complete function from the beginning, and then handle the compatibility with the lower version of the browser.

.

The specific methods are as follows:

1 conditional comment IE conditional comment is a statement conditionally interpreted by IE in the HTML source code. Conditional comments can be used to provide and hide code to IE. Note: only browsers below IE9 can recognize this syntax, while other browsers simply consider them normal comments.

Alert ("conditional syntax takes effect under IE, but script does not execute. Under non-IE, both sentences are treated as comments, so the current script executes")

Pages that use conditional comments work fine in IE9 and before, but are no longer supported after IE10.

.

2Magical CSS hack uses the principle of browser legacy bug to identify old browsers.

.box {

Color: red

_ color: blue; / * only IE6 knows * /

* color: pink; / * only IE67 knows * /

Color: yellow\ 9; / * IE browsers can recognize * /

}

Here are some common properties that are compatible

Inline-block: > = IE8

Min-width/min-height: > = IE7

: before,:after: > = IE8

Div:hover: > = IE7

Inline-block: > = IE8

Background-size: > = IE9

Fillet: > = IE9

Shadow: > = IE9

Animation / gradient: > = IE10

Some examples of compatible writing:

.clearfix: after {

Content:''

Display: block

Clear: both

}

.clearfix {

* zoom:1; / * valid only for IE6/IE7. Zoom:1 triggers hasLayout, which is similar to BFC. /

}

.target {

Display: inline-block

* display: inline; / * effective for IE67 only * /

* zoom: 1; / * effective for IE67 only * /

}

.

⑴ can write CSS for different browsers, and the process of writing different CSS code for different browsers is called CSS hack.

What is the principle of CSS Hack? Because different browsers have different support for CSS and different parsing results, it is also due to the priority in CSS. We can write different CSS for different browsers according to this.

For example, IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*", but can not recognize the underscore "_", and firefox can not recognize either. Wait

For example, set the background color code to distinguish between FF,IE7,IE6:background:orange,*background:green! important,*background:blue

Note: IE can recognize *, but standard browsers (such as FF) can not *

IE6 can recognize *, but not! important

IE7 can recognize *, can also recognize! important

FF does not recognize *, but can recognize! important

So, orange in FIREFOX, green in IE7, and blue in IE6.

Finally, browser priority: FF

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.