develop with

Browser Compatibility and Workarounds

Not all browsers are made the same, browser fallbacks are a big part of css

IE8

** Non-HTML5 tags and Rounded Corners ** IE8 doesn’t support round corners and box shadow. Fixing rounded corners and box shadows with non-html5 tags (article, aside, figure, footer, header, hgroup, menu, nav, section). Below are some of the issues and workarounds, without using polyfills:

Solution
Use the innerShiv plugin that wraps each html template to create a document fragment that will work in IE8.

Potential Bug Because innerShiv returns document fragment and not html string, an extra step is needed to convert the document fragment back to html string.

** Opacity animation ** IE8 causes a problem with opacity during animation starting it with full opacity.

Solution Explicitly set the opacity before animation if the target element doesn’t have full opacity or remove the filter attribute after animation if it results in fuzzy text or image. IE8 filter causes ClearType to turn off.

** Page mask with no background color not clickable ** Solution Add a background color and set opacity to 0

IE8 and IE9

** No linear-gradient support (until IE10) ** Solution Fallback to using background-color

comments powered by Disqus

Want to see a topic covered? create a suggestion

Get more developer references and books in the developwith store.