Browser Compatibility Problems

The main cause of browser compatibility problems is that different browsers parse the same code differently, resulting in inconsistent page display effects.

For the most part, our requirement is that the display be consistent no matter what browser the user is viewing our site or logging into our system. So browser compatibility issues are something that we web front-end developers often run into and have to solve.

What is a CSS hack

Different browsers parse CSS differently, resulting in different results for the same CSS output, which requires CSS hacks to solve partial browser compatibility problems. This process of writing different CSS code for different browsers is called A CSS Hack.

Common compatibility problems

  • Margin and padding are different by default. The solution is to add a global *{margin:0; padding:0; } to unify.
  • Png24 bit image appears in the background of iE6 browser, the solution is to make PNG8.
  • By default, text smaller than 12px is forced to display as 12px. You can add the CSS property -webkit-text-size adjust: None; To solve. Transform: Scale (0.75,0.75); Solve)
  • IE6 two-sided margin bug: When block property tag float is followed by margin, IE6 shows margin is larger than set. The solution is to add display:inline; Convert it to an inline property.
  • In IE6, ie7, the element height exceeds the height set by itself. The reason is that before IE8, browsers set the default row height for elements. The solution is to add overflow:hidden or set the line-height to a smaller height.
  • Min-height does not work in IE6. The solution is to add height:auto! important; height:xxpx; Where xx is the min-height setting.
  • Opacity IE uses filter:Alpha(Opacity=60), while other mainstream browsers use Opacity :0.6;
  • The img tag nested within the a(href attribute) tag will have a border under IE. Img {border:none; img{border:none; } style.
  • Input border problem. To remove the input border, use border:none; It will work, but it will not work under IE6 due to a BUG(priority issue) in parsing input styles.
  • The default CSS style for IE6 refers to the border with a border-style:inset; border-width:2px; To render the tags, the browser parses its own default CS and then the developer’s CSS according to its kernel parsing rules. There is a bug in IE6 rendering of INPUT, border:none; Border-style :none; border-width :none; border-colo :none; . The solution is to use :border:0 or border:0 None; Or border: none: border – color: transparent; The third option is recommended.

Commonly used hack techniques

CSS hacks come in three common forms

CSS property Hack, CSS selector Hack, and IE conditional comment Hack. The Hack is mainly for IE browser.

1. Attribute level Hack: For example, IE6 can recognize underscore “” and asterisk” “*”, IE7 can recognize asterisk “*” but not underscore “, whereas Firefox can’t recognize either.

Select level Hack: IE6 can recognize html.class {}, IE7 can recognize + html.class {} or *:first-child+ html.class {}.

Conditional comments are non-standard logic statements that Microsoft has provided since IE5. For example, for all IE: <! – [if] IE > <! — Your code — ><! [endif] — >, for IE6 and the following versions: <! – [if lt IE 7] > <! — Your code — ><! [endif] — >, this type of Hack is not only valid for CSS, but for any code written inside the judgment statement.

PS: Conditional comments can only be executed in IE. This code is ignored as a comment in non-IE browsers. You can use IE conditional comments to load different CSS, JS, HTML, server code, etc.

Common CSS hacks/* CSS attribute level Hack */
color:red; /* Recognized by all browsers */
_color:red; /* Only IE6 recognizes */
*color:red; /* IE6, IE7 */
+color:red; /* IE6, IE7 */
*+color:red; /* IE6, IE7 */
[color:red; /* IE6, IE7 */
color:red9; /* id */
color:red; /* id */
color:red9; /* Only IE9 recognizes */
color:red ; /* Only IE9 recognizes */color:red! important;/* IE6 does not recognize! important*/
-------------------------------------------------------------
/* CSS selector level Hack */
*html #demo { color:red; }/* Only IE6 recognizes */
*+html #demo { color:red; }/* Only IE7 recognizes */
body:nth-of-type(1) #demo { color:red; }/* FF3.5+, Chrome, Safari, Opera */
head:first-child+body #demo { color:red; } /* * * * * * * * * * * * *
:root #demo { color:red9; } : /* Only IE9 recognizes */
--------------------------------------------------------------
/* IE conditional comment Hack */<! - [ifIE]> Here content is only visible to IE <! [endif]--> <! - [if IE 6[> Internet Explorer 6 only. 0Visible <! [endif]--> <! - [if IE 7[> Internet Explorer 7 only. 0Visible <! [endif]--> <! - [if! IE7[> < p style = "text-align: center; <! [endif]--> <! - [if gt IE 6[> IE6 versions can be recognized,IE6 can not recognize <! [endif]--> <! - [if gte IE 7[> IE7 and IE7 versions can be recognized <! [endif]--> <! - [if lt IE 7[> < p style = "word-break: inherit; color: RGB (50, 50, 50); <! [endif]--> <! - [if lte IE 7]> IE7 and the following versions of IE7 can be recognized <! [endif]--> <! - [if! IE]> Here content only non-IE visible <! [endif]-->Copy the code