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

This article shows you how to quickly solve the problem of browser compatibility, the content is concise and easy to understand, it will definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

Due to the different parsing of the page by different browsers, the style of the page displayed in different browsers will be inconsistent. In order to maintain the unity of the page, it is often necessary to debug the compatibility of the browser.

CSS Hack

In the face of many compatibility problems of browsers, we often need to debug through CSS style, of which CSS Hack is the most commonly used. The so-called CSS Hack is to write different CSS styles for different browsers and control the display effect of the browser by using a style code identified separately by a browser. CSS Hack is mainly divided into two categories.

CSS selector Hack

The CSS selector Hack refers to controlling different Hack styles by adding some Hack prefixes in front of the CSS selector that can only be recognized by a particular browser. For different versions of browsers, the selector Hack is divided into the following categories:

(1) Selector Hack identified by IE6 and below IE6

When writing a CSS style, if you want this style to be valid only for browsers of IE6 and below IE6, you can use the selector Hack of IE6 and below. The basic syntax is as follows:

* html selector {style code}

(2) Selector Hack recognized by IE7

When writing a CSS style, if you want this style to work only for IE7 browsers, you can use the IE7-recognized selector Hack, whose basic syntax is as follows:

* + html selector {style code}

CSS property Hack

Here, Mr. Xiaoqiang divides the attribute hack into prefix attribute hack and suffix attribute hack.

The CSS attribute Hack (prefix) is for browser _ color:red;IE6 and its following version * color:red; or + color:red;IE7 and its following version CSS attribute Hack (suffix) for browser color:red\ 9, IE6, IE8, IE9, color:red, and other non-IE browsers.

In fact, now more and more companies are not compatible with ie6, and now they are more concerned about high-version browsers such as ie8.910, so here Xiaoqiang teacher also summarized ie-specific hack, such as ie8 and so on.

Selector Hack for browser @ media screen\ 9 {body: red;}} only works for IE6/7 @ media\ 0screen {body {background: red;}} only for IE8 @ media\ 0screen\, screen\ 9 {body {background: blue;}} only for IE6/7/8 @ media screen\ 0 {body {background: green }} is only valid for IE8/9/10 @ media screen and (- ms-high-contrast: active), (- ms-high-contrast: none) {body {background: orange;}} is only valid for IE10

If there are more styles and conditional notes, it is a good choice:

IE conditional comment statement

IE conditional comment statement is aimed at browser version IE7 below version IE7 and below (including IE7) IE7 version above IE7 and above (including IE7) non-IE7 version you use a non-Internet Explorer non-IE browser

The above content is how to quickly solve the problem of browser compatibility, have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.