开发者

how come my IE conditional statements do not work inside style tags?

开发者 https://www.devze.com 2022-12-10 07:59 出处:网络
I\'m trying to use the IE specific conditional statements to alter class settings based on browser type. I was under the impression they could do this but I can\'t seem to get it working.

I'm trying to use the IE specific conditional statements to alter class settings based on browser type. I was under the impression they could do this but I can't seem to get it working.

Below is a simple example, if the browser is IE the text should be blue, otherwise text should remain red.

"The browser is IE" statement in the body works fine, if I open firefox it's not there, internet explorer.. it is.

What am I doing wrong?

<html>
<head>
<style type="text/css">
.class{color:red;}
<!--[if开发者_如何学C IE]>
.class{color:blue;}
<![endif]-->
</head>
</style>
<body>
<!--[if IE]>
This browser is IE
<![endif]-->
<p class="class">Color changing text based on browser</p>
</body>
</html>


Firstly your code doesn't work - you should have the css read .color not .class

Second the conditional statements just don't work inside css. So instead write your code such that the conditional is around the IE specific styling.

<html>
<head>  
    <style type="text/css">
        .color{ color:red; }
    </style>

    <!--[if IE]>
    <style type="text/css">
        .color{ color:blue; }
    </style>
    <![endif]-->
</head>

<body>
    <!--[if IE]>
    This browser is IE
    <![endif]-->
    <p class="color">Color changing text based on browser</p>
</body>
</html>


Apparently they don't work within the style tag. (see here: http://reference.sitepoint.com/css/conditionalcomments)

It appears you can use them within the head tag, though, and include an external CSS file if it is IE, and hide that css file if it is another browser.


If the 'hack' is targeted on IE6 or older you can however also do as follows:

.color {
    color: red;
}

* html .color {
    color: blue;
}

Note the "* html" prefix. This is only parsed by IE6 and older. You can also use the "!important" declaration. The particular line would then be ignored by IE6 and older.

.color {
    color: red !important;
    color: blue;
}

If you have relatively a lot of them, a better practice would be to load an additional CSS stylesheet file using the conditional statement.


you can also do color: red;_color:blue;

0

精彩评论

暂无评论...
验证码 换一张
取 消