Question

Can any one help me , please. how to apply the height css property on ie9 just and do I can use conditional css inside css file?

Was it helpful?

Solution

You can't do conditional css in the css file, but you can give each version of IE its own class. Just put this at the top of the HTML file:

<!doctype html>
<!--[if !IE]> <html class="not-ie" lang="en"> <![endif]-->
<!--[if lt IE 7]> <html class="ie6" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="ie7" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="ie8" lang="en"> <![endif]-->
<!--[if IE 9]> <html class="ie9"><![endif]-->
<!--[if gt IE 9]><!--> <html lang="en"> <!--<![endif]-->

Now all you need to do in your css file to target ie9 is this:

.ie9 div.whatever {
    height: some value;
}

OTHER TIPS

I don't have a conditional CSS solution that can be done within the same CSS file. However, if you're not adverse to it, you could create a second CSS file specifically for IE9, and use conditional comments to apply the CSS. For example:

<link type="text/css" href="style.css" rel="stylesheet" />
<!--[if IE 9]>
<link type="text/css" href="style-ie9.css" rel="stylesheet" />
<![endif]-->

In this example, you would put whatever changes to height into "style-ie9.css". That stylesheet would only be applied when the browser is detected to be Internet Explorer 9.

Let me know if you have any questions, and I'll be happy to help further. Also, here's a link for more information on conditional comments, if you want a better understanding of them.

CSS Hack

As long as you do not want to set font or background just for IE 9 a combined :root hack will help

.somebox {
    regular
    definitions
    here
}

:root .somebox{height:100px \ ;}

Conditional HTML Comment

Putting this in your head section after linking of the regular css file(s) will overwrite definitions only when IE 9 is used:

<!--[if IE 9 ]>
    <link href="css/ie9only.css" type="text/css" rel="stylesheet"/>
<![endif]-->

ie9only.css must contain the IE 9 specific rules, of course.

Similar approach but using style tag instead of linking external file:

<!--[if IE 9 ]>
    <style>.somebox{height:100px;}</style>
<![endif]-->
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top