CONDITION CSS differentiate between IE6 to IE7

i want to declare a style different to ie6 and ie7 , but my condition in css recognized by IE7 as IE6. I use XP and explorer 7. This the code i use :

<!--[if !IE]>

#mainDiv{text-align:-moz-center;}

#skyBanner {top:0px;left:0px; position:fixed;visibility:hidden;}

<![endif]-->     

<!--[if lt IE 7]>

body > #skyBanner {  position: fixed;}

#skyBanner {position:absolute;visibility:hidden;

left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );

top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );

}

<![endif]-->

<!--[if IE 7]>

#skyBanner {position:fixed;visibility:hidden;

}    
<![endif]-->

what is my mistake?

You can't use conditional comments in CSS. Only in HTML. So you'd have to put the declarations for the different browsers into different files and conditional-comment several <link>s to them.

So more something along the lines of

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

Your !IE is incorrectly commented, and you are missing style tags. If this is exactly how it exists in your HTML then that is your problem. If this is in a CSS file then you cannot use conditional comments in that location.

Corrected:

<!--[if !IE]>-->
<style type="text/css" media="screen">
    #mainDiv {text-align:-moz-center;}
    #skyBanner {top:0px;left:0px; position:fixed;visibility:hidden;}
</style>
<!--<![endif]-->

<!--[if lt IE 7]>
<style type="text/css" media="screen">
    body > #skyBanner {  position: fixed;}
    #skyBanner {position:absolute;visibility:hidden;
    left: expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px');
    top: expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
    }
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css" media="screen">
    #skyBanner {position:fixed;visibility:hidden;}
</style>
<![endif]-->

Again, as it is currently written, NO browser is seeing the !IE code.

I'm also not sure you've written the other conditionals correctly. You have "body > #skyBanner {position: fixed;}" under the "if lt IE 7" conditional, yet IE6 and lower do not support this CSS selector to my knowledge.

So any number of the issues I've described could be leading to your problems with IE6 and IE7.

You need to do it a bit different way. Use comments and enclose links to browser specific CSS files. This way it should work:

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

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

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

You can also use <style> tags instead of links, but this is a bad way of doing this.

来源：https://stackoverflow.com/questions/1115767/condition-css-differentiate-between-ie6-to-ie7

标签

html

css

internet-explorer-6

internet-explorer-7

conditional