cssinternet-explorer-8internet-explorer-9conditional-comments

conditional comments IE 9


I have one line of CSS to change on a couple of classes on a Wordpress site to make it backward compatible to IE9 (it is currently on a localhost site in development).

The CSS i need to turn off is just one line and where I'll change the opacity from 0 to 1 so the headings show in older IE versions - the transforms etc won't be recognised so these won't be an issue.

If I use a conditional comment, because it's only one line of CSS - can I use the following:

<!--[if IE 9]>
<style> 
span, .animate3, .animate4 {opacity: 1!important;}
</style>
<![endif]-->

I can't seem to find any info about using the style tag after a conditional comment. It would seem easier than setting up a stylesheet for one line of code?

Any help ideas would be awesome

Paul.


Solution

  • Yes, the way you set it up is correct and can be implemented in the <head> of the document.

    As mentioned in the MSDN Compatibility documents about conditional comments:

    <!--[if expression]> HTML <![endif]--> 
    

    is the way to write it. Any HTML element inside can be written, so <style> is valid to use.

    <!--[if IE 9]><style>body { background-color: red; }</style> <![endif]--> 
    

    Read more about conditional comments at MSDN or at Quirksmode (with some better examples).