IE8 compatibility

IE8 doesn't support many standard rules of W3C-CSS3. One of them is "background-origin" attribute, this attribute is used to define the origin of  background-image, where it takes one value of (border, padding or content).

• IE up to version 7 defaults to background-origin: border;

• IE 8 default behavior is background-origin: padding;

But IE8 behaves like IE7 untill you tell him to behave like himself "IE8", that by adding the following meta tag to your HTML layout:

<meta http-equiv="X-UA-Compatible" content="IE=8" />

IE8, before adding meta tag

IE8, after adding meta tag to behave like IE8

The following selectors and attributes are not supported also in IE: and there are still more!!!

:root { sRules }

:nth-child() { sRules }

:nth-last-child() { sRules }

:nth-of-type() { sRules }

:nth-last-of-type() { sRules }

:last-child { sRules }
:first-of-type { sRules }

:last-of-type { sRules }

:only-child { sRules }

:only-of-type { sRules }

:empty { sRules }

:target { sRules }

:not(X) { sRules }

:enabled { sRules }

:disabled { sRules }

:checked { sRules }
:indeterminate { sRules }

:default { sRules }

:valid { sRules }
:invalid { sRules }

:in-range { sRules }

:out-of-range { sRules }
:required { sRules }
:optional { sRules }
:read-only { sRules }
:read-write { sRules }

::before { sRules }
::after { sRules }
::first-letter { sRules }

::first-line { sRules }

::selection { sRules }

::value { sRules }

::choices { sRules }

::repeat-item { sRules }

::repeat-index { sRules }

{ color-profile : sProfile }

{ rendering-intent : sIntent }

{ background : sBackground1,sBackground2, etc. }

{ background-clip : sClip }

{ background-origin : sOrigin }

{ background-break : sBreak }

{ background-size : sSize }

{ font-effect : sEffect }

{ font-emphasize : sEmphasize }

{ font-size-adjust : sSizeAdjust }

{ font-smooth : sSmooth }

{ font-stretch : sStretch }
{ hanging-punctuation : sHangingPunctuation }
{ punctuation-trim : sTrim }

{ border-break : sBreak }
{ border-image : sImage }
{ border-radius : sRadius }

{ box-shadow : sShadow }