Internet Explorer的条件css语句

I am developing a website that has a div with a background image that is has the css

我正在开发一个网站,其中有一个div,背景图片有css

background-attachment:fixed;

This looks good in all browsers MINUS internet explorer. Implementing smooth scrolling via javascript isn't an option.

这在所有浏览器MINUS Internet Explorer中看起来都不错。通过javascript实现平滑滚动不是一种选择。

So I found a plugin that allows me to determine when IE 10 and 11 is being used. https://github.com/stowball/Layout-Engine

所以我找到了一个允许我确定何时使用IE 10和11的插件。 https://github.com/stowball/Layout-Engine

I tested this with the following code

我用以下代码测试了这个

    <script type="text/javascript">
        if (layoutEngine.vendor === 'ie' && layoutEngine.version === 11) {
            alert("using IE 11");
        }
    </script>

And got the following

并得到以下

So I know this is working. So I used this same concept to use Jquery to add an additional class.

所以我知道这是有效的。所以我使用相同的概念来使用Jquery添加一个额外的类。

CSS

  .grouppic{
      background-attachment:fixed;
  }

  .grouppicIEVersion{
      background-attachment:inherit !important;
  }

Javascript

<script type="text/javascript">
    if (layoutEngine.vendor === 'ie' && layoutEngine.version === 11) {
        $('#groupPicture').addClass("grouppicIEVersion");
    }
</script>

HTML

  <div class="w-section grouppic " id="groupPicture">
    <div class="w-container">
    </div>
   </div>

But this doesn't work. The class doesn't get added in internet explorer. I'm not sure if this is a jquery error or something with the plugin I'm using. Some help would be great.

但这不起作用。该课程未在Internet Explorer中添加。我不确定这是一个jquery错误还是我正在使用的插件。一些帮助会很棒。

3 个解决方案

#1

As @Ivanka has stated this needs to be wrapped in a document ready function or else the DOM may not have loaded and therefore the #groupPicture element may not exist yet.

正如@Ivanka所说,这需要包含在文档就绪函数中,否则DOM可能没有加载,因此#groupPicture元素可能还不存在。

A further point I would make is to attach a class to the body and use this in your CSS instead. This means you attach the class once and then can apply browser overrides using CSS only from then on.

我要做的另一点是将一个类附加到正文并在CSS中使用它。这意味着您只需附加一次类,然后只能使用CSS来应用浏览器覆盖。

For example:

$(function(){
   if (layoutEngine.vendor === 'ie' && layoutEngine.version === 11) {
      $("body").addClass("msie11");
   }
});

Then the CSS can just be:

然后CSS可以是:

.grouppic{
    background-attachment:fixed;
}

.msie11 .grouppic{
    background-attachment:inherit !important;
}

#2

but you can easily find out using the css hack's then why to use the other pluggin to find out that

但你可以很容易地找到使用css hack's然后为什么要使用其他插件来找出它

<style>
    @media all and (-ms-high-contrast:none)
     {
     .grouppicIEVersion{ background-attachment:inherit !important;  } /* IE10 */
     *::-ms-backdrop, .grouppicIEVersion{background-attachment:inherit !important;
  } /* IE11 */
     }
  </style>

here the reference link you can check out
Reference Link

这里有参考链接,你可以查看参考链接

#3

Wrap it in $.ready():

用$ .ready()包装它:

$(document).ready(function() {
    if (layoutEngine.vendor === 'ie' && layoutEngine.version === 11) {
        $('#groupPicture').addClass("grouppicIEVersion");
    }
});

Probably when you want to add this class, the element #groupPicture is not available in the DOM yet.

可能当您想要添加此类时,元素#groupPicture尚未在DOM中可用。

Also check for errors in your console.

还要检查控制台中的错误。

#1