How to apply class only for IE?

冷暖自知 提交于 2021-02-08 07:26:23

问题


I have this class in CSS and i need to change it when its IE. I want to remove padding-bottom. How can I do that?

I don't want to add another CSS file, I want to change only one property in one class.

.container-wrapp{
    float: left;
    position: relative;
    width: 100%;
    padding-bottom:100px;
    height: 100%;
}

I tried this but without success:

<!--[if IE]>
<style type="text/css">
.container-wrapp{
    float: left;
    position: relative;
    width: 100%;
    height: 100%;
}
</style>
<![endif]-->

回答1:


For IE10+ you can do the following:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
   .container-wrapp{padding-bottom:0;}
}

Demo Fiddle (Note that the text is red only in IE 10+)

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
  .red {
    color: red
  }
}
<div class="red">text</div>

NB: Using hacks like these are generally frowned upon. Use with caution.




回答2:


Create a stylesheet file ie.css and use if AFTER the global style definition this way:

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

This should work.




回答3:


I think for best practice you should write IE conditional statement inside the tag that inside has a link to your special ie specific style sheet. This HAS TO BE after your custom css link so it overrides the css property. Here is an example:

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

Hope this will helps you!

IE 10 and onward no longer support conditional comments. From the MS official website:

Support for conditional comments has been removed in Internet Explorer 10 standards and quirks modes for improved interoperability and compliance with HTML5.

Please see here for more details.

If you desperately need to target ie, you can use this jQuery code to add a ie class to and then use .ie class in your css to target ie browsers.

if ($.browser.msie) {
 $("html").addClass("ie");
}



回答4:


Checkout this link How to create an ie only stylesheet , You need to create a separate style sheet for IE.



来源:https://stackoverflow.com/questions/33364451/how-to-apply-class-only-for-ie

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!