Wednesday 24 February 2010

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 }

No comments:

Post a Comment