Question

如果用户的浏览器是IE8，我试图专门覆盖一些样式规则。在我的<!doctype html>中，我有以下规则：

<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

在检测到IE浏览器后，会将定义的类添加到<html>标记中。

我想要定位的块有一个.social类。要覆盖IE8的.social，在.css中使用的正确选择器是什么？我尝试过.social.no-js.lt-ie9，no-js.lt-ie9，只是.no-js.lt-ie9。列出课程的顺序是否重要？如果这些类不是彼此的直接后代，这是否重要？我所做的一切似乎都没有覆盖IE8中的实际.social。任何提示？

以下是我到目前为止......

.social {
    background: url('../images/thanks-paper.png') no-repeat 0 0;
    height: 540px;
    margin: 10px 0 40px -333px;
    padding: 0 0 0 310px;
    position:relative;
}

.no-js.lt-ie9.social {
  background:url('../images/thanks-paper.png') no-repeat 0 0;
  height:540px;
  margin:10px 0 40px -400px;
  padding-bottom:0;
  padding-left:382px;
  padding-right:0;
  left:8px;
  position:relative;
}

以下是页面当前的设置方式......

<html class="no-js lt-ie9" lang="en">
  <head> ... </head> 
    <body> ... 
      <div class="social"> ... </div>
    </body>
</html>

Answer 1

使用此目标来定位IE8及以下：

.lt-ie9 .social {
    margin-left: -400px;
    padding-left:382px;
    left:8px;
}

类.no-js应该与Modernizr之类的库一起使用。通过使用javascript删除类，它可以作为JS是否启用的指示。您可以使用.no-js作为CSS来定位使用javascript 已禁用的浏览器。

另外，请注意类之间的空格。当没有空格（如.lt-ie9.social）编写类时，您实际上是在尝试使用 all 这些类来查找元素。所以.no-js.lt-ie9.social正试图找到每个类的元素。

覆盖IE8的CSS样式，多个类选择器

1 个答案: