How to apply class only for IE?


Tags: css,internet-explorer

Problem :

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]-->


Solution :

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.


    CSS Howto..

    How to temporarily add a CSS style?

    How do I align an image within a pan/hover border/box?

    How do i get the submenus to show with a small window size?

    How to use custom field to add class to a post?

    CSS: how to make bottom div width same as the width of image above?

    Can't figure out how to code my css

    How to create a pricetag shape in CSS and HTML

    How to apply multiple css radial gradients to a single element

    How to get hyperlinks inside a “pop-up” term reference on mouse-over, and seperate the HTML term from the “pop-up” reference content

    how to apply css transition to background image

    slide show with bootstrap

    How to make css transition effect apply to all its children?

    Gulp : How to copy multiple files and keep the folder structure

    How to create fluid trapezoid image with css?

    how do i change the css property for only one row with a custom class with out removing the styles from the other rows?

    How to scroll through a div before the page scrolls?

    How to keep transparent radial background smooth in browsers other than Chrome?

    How to control the CSS of the contents that loaded dynamically into iframe?

    Show a sharing icon on hover on image

    Drupal 7.x: how to apply styles to RSS feed in node?

    How to to make a gap between rows in FlowPanel in Css in Gwt?

    How to prevent outer
    CSS from affecting inner
    CSS

    How to use a full width image as border between content and footer

    How can I modify my CSS to require a class instead of a “+ label”?

    How to detect the form is blank or not by jQuery

    How to incorporate CSS into a table

    How do I make XAMPP use the paths from my Wordpress themes folder?

    how to edit the width of menu bar in dreamweaver

    How should a graphic designer learn web design? [closed]

    How to make a simple plus one voting system in code igniter