发表新帖
发表新帖

Apply style ONLY on IE

后端 未结
关注
12 2111
迷失自我
迷失自我 2020-11-28 01:14

Here is my block of CSS:

.actual-form table {
  padding: 5px 0 15px 15px;
  margin: 0 0 30px 0;
  display: block;
  width: 100%;
  background: #f9f9f9;
  bor
相关标签:
12条回答
  • 天涯浪人
    2020-11-28 01:25

    It really depends on the IE versions ... I found this excellent resource that is up to date from IE6-10:

    CSS hack for Internet Explorer 6

    It is called the Star HTML Hack and looks as follows:

    • html .color {color: #F00;} This hack uses fully valid CSS.

    CSS hack for Internet Explorer 7

    It is called the Star Plus Hack.

    *:first-child+html .color {color: #F00;} Or a shorter version:

    *+html .color {color: #F00;} Like the star HTML hack, this uses valid CSS.

    CSS hack for Internet Explorer 8

    @media \0screen { .color {color: #F00;} } This hacks does not use valid CSS.

    CSS hack for Internet Explorer 9

    :root .color {color: #F00\9;} This hacks also does not use valid CSS.

    Added 2013.02.04: Unfortunately IE10 understands this hack.

    CSS hack for Internet Explorer 10

    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { .color {color: #F00;} } This hacks also does not use valid CSS.

    0 讨论(0)
  • 执笔经年
    2020-11-28 01:26

    For IE9+

    @media screen and (min-width:0\0) and (min-resolution: +72dpi) {
   // IE9+ CSS
   .selector{
      color: red;
   }
}

    IE Edge 12+

    @supports (-ms-ime-align: auto) {
  .selector {
    color: red;
  }
}

    This one works on Edge and all IEs

    :-ms-lang(x), .selector { color: red; }
    0 讨论(0)
  • 礼貌的吻别
    2020-11-28 01:28

    A bit late on this one but this worked perfectly for me when trying to hide the background for IE6 & 7

    .myclass{ 
    background-image: url("images/myimg.png");
    background-position: right top;
    background-repeat: no-repeat;
    background-size: 22px auto;
    padding-left: 48px;
    height: 42px;
    _background-image: none;
    *background-image: none;
}

    I got this hack via: http://briancray.com/posts/target-ie6-and-ie7-with-only-1-extra-character-in-your-css/

    #myelement
{
    color: #999; /* shows in all browsers */
    *color: #999; /* notice the * before the property - shows in IE7 and below */
    _color: #999; /* notice the _ before the property - shows in IE6 and below */
}
    0 讨论(0)
  • 执笔经年
    2020-11-28 01:31

    I think for best practice you should write IE conditional statement inside the <head> tag that inside has a link to your special ie style sheet. This HAS TO BE after your custom css link so it overrides the latter, I have a small site so i use the same ie css for all pages. 

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

    this differs from james answer as i think(personal opinion because i work with a designer team and i dont want them to touch my html files and mess up something there) you should never include styles in your html file.

    0 讨论(0)
  • 花落未央
    2020-11-28 01:35

    As well as a conditional comment could also use CSS Browser Selector http://rafael.adm.br/css_browser_selector/ as this will allow you to target specific browsers. You can then set your CSS as 

    .ie .actual-form table {
    width: 100%
    }

    This will also allow you to target specific browsers within your main stylesheet without the need for conditional comments.

    0 讨论(0)
  • 自闭症患者
    2020-11-28 01:39 
    <!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

body.ie .actual-form table {
    width: 100%
}
    0 讨论(0)
 看不清?
提交回复
热议问题