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