Apply style ONLY on IE

2019-01-05 08:29发布

站内问答 / HTML/CSS
383 11 4

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;
  border-top: 1px solid #d0d0d0;
  border-bottom: 1px solid #d0d0d0;
}

I only want IE 7, 8, and 9 to "see" width: 100%

What is the simplest way to accomplish this?

11条回答
Summer. ? 凉城
2楼-- · 2019-01-05 08:57

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) 举报
【Aperson】
3楼-- · 2019-01-05 08:58 
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

Explanation: It is a Microsoft-specific media query. Using -ms-high-contrast property specific to Microsoft IE, it will only be parsed in Internet Explorer 10 or greater. I have used both the valid values of the media query, so it will be parsed by IE only, whether the user has high contrast enabled or not.

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
4楼-- · 2019-01-05 09:00

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) 举报
Summer. ? 凉城
5楼-- · 2019-01-05 09:00

Welcome BrowserDetect - an awesome function.

<script>
    var BrowserDetect;
    BrowserDetect = {...};//  get BrowserDetect Object from the link referenced in this answer
    BrowserDetect.init();
    // On page load, detect browser (with jQuery or vanilla)
    if (BrowserDetect.browser === 'Explorer') {
      // Add 'ie' class on every element on the page.
      $(*).addClass('ie');
    }
</script>

<!-- ENSURE IE STYLES ARE AVAILABLE -->
<style>
    div.ie {
       // do something special for div on IE browser.
    }
    h1.ie {
     // do something special for h1 on IE browser.
    }
</style>

The Object BrowserDetect also provides version info so we can add specific classes - for ex. $('*').addClass('ie9'); if (BrowserDetect.version == 9).

Good Luck....

查看更多
0人赞 添加讨论(0) 举报
Emotional °昔
6楼-- · 2019-01-05 09:08

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) 举报
淡お忘
7楼-- · 2019-01-05 09:12

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) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)