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 }
::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-image : sImage }
{ border-radius : sRadius }
{ box-shadow : sShadow }