CONDITION CSS differentiate between IE6 to IE7

2019-02-21 04:41发布

站内问答 / HTML/CSS
1911 3 4

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?

3条回答
SAY GOODBYE
2楼-- · 2019-02-21 05:16

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>
查看更多
0人赞 添加讨论(0) 举报
叼着烟拽天下
3楼-- · 2019-02-21 05:28

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.

查看更多
0人赞 添加讨论(0) 举报
放荡不羁爱自由
4楼-- · 2019-02-21 05:31

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)