Question

在我的css代码中，我想要破解我想要影响IE6 / 7

#topmenu li a.activa,
#topmenu li a.activa:hover{
    *background: url(../nImg/comunHomeSprite.png) no-repeat;
    *background-position: right -2169px;  
    *float:left;
    *margin:0;
    *padding:0;
    *margin-left:10px;
}

还有一种简单的方法可以将它们转换成IE8吗？

Answer 1

如果你必须使用hacks，请阅读：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-how-to-target-ie6-ie7-and-ie8-uniquely-with-4-characters/

但请注意，CSS hacks被认为是邪恶的。

条件评论是一个不错的选择。它们易于使用，并保证正常工作。

您不能将条件注释直接放入样式表中，但您可以使用条件注释在<body>标记中定义一个类，然后可以在CSS中引用它：

像这样写下您的HTML <body>标记：

<!--[if IE 6]> <body class="ie6 ltie7 ltie8 ltie9"> <![endif]-->  
<!--[if IE 7]> <body class="ie7 ltie8 ltie9"> <![endif]-->  
<!--[if IE 8]> <body class="ie8 ltie9"> <![endif]-->  
<!--[if IE 9]> <body class="ie9"> <![endif]-->  
<!--[if (gt IE 9)|!(IE)]><!--> <body> <!--<![endif]-->

然后在CSS中，您可以在选择器中引用相关的IE类，并且您将拥有完全有效的CSS代码：

#topmenu li a.activa:hover {
   /*normal styles here*/
}

.ie8 #topmenu li a.activa:hover {
   /*IE8-specific styles here*/
}

希望有所帮助。

Answer 2

找到了这个

selector {
    prop: value; /* real browsers */
    _prop: value; /* ie6 */
    *prop: value; /* ie6 ie7 */
    prop: value\9; /* ie8 */
}

不知道这是否解决IE9

Answer 3

/* IE8 */ @media \0screen { #topmenu li a.activa, @media \0screen #topmenu li a.activa:hover {
  background: url(../nImg/comunHomeSprite.png) no-repeat;
  background-position: right -2169px;  
  float:left;
  margin:0;
  padding:0;
  margin-left:10px;
} }

我个人更喜欢这种方式，因为属性仍然是标准的CSS，你只需要改变一次，而不是你有多少不同的黑客。否则它会变得有点笨拙。

将IE6和7 Hack转换为IE6,7和8黑客

3 个答案: