CSS hack browser compatibility issues

First, talk about the core of various mainstream browsers

The most important or core part of the browser is "Rendering engine", can be translated into "rendering engines", different browser cores on the page to write the interpretation of different, reflected in the effect of the Web page will vary.

Browser IE Firefox Chrome Safari Opera
Kernel
Trident
Gecko
Webkit
Webkit
Presto

Of course, various browser cores are constantly updated, the table can only be used as a simple reference, such as Chromium/bink and other kernels, as well as a variety of browser core specific knowledge, interested in the Internet to check.

Because different browsers of different kernels, resulting in different rendering effect, we in the actual development, in order to achieve a consistent effect, so there is a compatibility issue.

Second, CSS Hack

The purpose of CSS Hack is to make CSS code compatible with different browsers.

There are roughly 3 forms of representation:
CSS class internal hack such as IE6 can recognize the underscore "_" and the asterisk "*", IE7 can recognize the asterisk "*".
Selector hack: For example, IE6 can recognize HTML. CLASS{},IE7 can identify +html. class{} or *:first-child+html. class{}.
HTML Header Reference (if IE) Hack: For all ie:<[endif]--> conditional annotation methods. The
Writing order is usually written in the back of the CSS of a highly recognizable browser.
Here are some common CSS hack methods
1-piece notation




For example the above code:

If it is IE browser, then execute the code written in it, not the words will not be executed.
GT: represents greater than;
LT: represents less than;
Gte:greater than or equal
Lte:less than or equal
! : Select all versions except the conditional version
For example:<!--[if Lt IE 7]> is represented if it is IE7 the following version.
2 Intra-class attribute prefixes
The CSS style property name is preceded by some hack prefixes that are only recognized by a specific browser to achieve the desired page presentation effect. For example:
Copy Code
. test{
Color: #000; /* General support for normal notation
Color: #00F \9; / all IE browser (ie6+) Support /
/ But IE8 does not recognize "*" and "_" /
[Color: #000; color: #0F0; Sf,ch Support /
Color: #00F; / IE8 Support /
Color: #FF0; /* IE7 Support */
_color: #F00; /* IE6 Support /
}
Copy Code
"The-″ minus is IE6 proprietary hack
"The \9″ie6/ie7/ie8/ie9/ie10 are in effect.
"The \0″ie8/ie9/ie10 are in force and are IE8/9/10 hack
"\9\0″ only for Ie9/ie10, is IE9/10 's hack
IE6 The following can be identified ;!important not recognized;
FF does not recognize *, but can identify!important;
3 Selector Prefix method

• HTML. Test{color: #090;}/* for IE6 and earlier */
• • HTML. Test{color: #ff0;}/* for IE7 /
    the HTML prefix is only valid for IE6 +html *+ prefixes are only valid for IE7.

Of course, the summary of these are not detailed and comprehensive, the specific application will be in the actual development based on the situation.

II. issues related to CSS compatibility

1, padding and margin issues
Different browsers, the default margin and padding parsing method is different
Solution:
body{
margin:0px;
padding:0px;
}
2. Center Layout
Ff,chrome .... Center display of block-level elements by means of Margin:auto
IE6 and below, mainly through the Text-align:center; the center of all elements (including block-level)
body{
Margin:auto;
Text-align:center;
}
3. Element height and content
Content height beyond the defined height, IE6, adaptive, other browsers, overflow.
Solution:
Overflow property;
4. Influence of child elements on parent elements when setting the top margin
Solution:
(1), parent element plus border
(2), sets the padding-top of the parent element to replace the margin-top of the child element

(3), see the related articles in my blog for more methods.

Third, CSS3 browser prefix

When we use some of the properties of CSS3, in order to achieve browser compatibility, we usually add some prefixes, such as:-webkit-,-ms-and so on.

These prefixes are actually private properties of the browser.

Browser prefix:
-webkit-transform:translatex (x)//safari and Chrome
-o-transform:translatex (x)//opera
-moz-transform:translatex (x)//firefox
-ms-transform:translatex (x)//ie

CSS hack browser compatibility issues