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

In this issue, the editor will bring you how to achieve the compatibility of IE6, IE7 and Firefox. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

Two solutions to solve the compatibility of IE6, IE7 and Firefox

The first Scheme of ◆: CSSHack

The exact way to write it is easy:

# someNode {position:fixed; # position:fixed; _ position:fixed;}

* display it to Firefox and other browsers

The second row is for IE7 (it may be the same with IE8 and IE9 in the future, who knows).

The third row is for IE6 and older versions.

The application of * is to enable IE6 to "support" position:fixed, and with this principle, it is possible not to introduce JavaScript code (only use IE6's expression). I have a ready-made page here, and CSS is written 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);}

The second scheme of ◆:

Establish different .css schemes for different browsers, and load different css files according to the browser type and version number when browsing.

Of course, there are two more scenarios, using JS judgment or server-side methods.

Attached: the support of various browsers for selectors

On the basis of normal selector {property:value;}, Hack is often used for the same element according to the specific situation to achieve unity between browsers.

◆ IE Series:

Selector {+ property:value;} adds a "+" sign to the attribute name, which is recognized only by the IE series.

Selector {* property:value;} precede the attribute name with an asterisk "*". This Hack can only be recognized by the IE series.

Selector {_ property:value;} underscores the attribute name with an underscore "_". This Hack is recognized only by the IE series (except IE7).

* htmlselector {property:value;} uses the inheritance method * htmlselector on the selector. This Hack can only be recognized by the IE series (except IE7).

Html/**/ > bodyselector {property:value;} uses the inheritance method html/**/ > bodyselector on the selector, which is recognized only by the IE series (except IE7).

Selector {property/**/:value;} adds a comment between the attribute name and the colon ":" to block IE6.

Selector/**/ {property/**/:value;} adds comments between selector and curly braces "{", and between attribute name and colon ":" to block IE5 and IE6 (without shielding IE5.5).

Select/**/ {property:value;} adds comments between selector and curly braces "{" to block IE5.

* + htmlselector {propertyimportant valueimportant;} use inheritance method on the selector * + htmlselector plus! important, this Hack can only be recognized by IE7.

Firefox:

*: lang (lang) selector {propertybank valueimportant;} if defined by pseudo-class lang (language) plus! important, only Firefox can recognize it.

Safari:

If selector:empty is defined by pseudo-class empty plus! important, only Safari can recognize it.

Opera:

@ mediaalland (min-width:0px) {selector {property:value;}} is defined using a special inheritance method, which is currently recognized only by Opera.

The most common use of Hack by ◆ is the CSS box model Hack, which removes floating Hack.

The CSS box model has serious parsing errors on IE5.X. This Hack is for IE5.X:

Selctor {width:IE5.X width; voice-family: "\"}\ ""; voice-family:inherit;width: correct width;}

Clear floating Hack

Selector:after {content: "."; display:block;height:0;clear:both; visibility:hidden;} these are the two solutions shared by Xiaobian to achieve the compatibility of IE6, IE7 and Firefox. If you happen to have similar doubts, please refer to the above analysis to understand. If you want to know more about it, 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.