IE에만 스타일 적용

Programing

IE에만 스타일 적용

crosscheck 2020. 5. 31. 10:05

IE에만 스타일 적용

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;
}

IE 7, 8, 9 만 "보기"를 원합니다 width: 100%

이것을 달성하는 가장 간단한 방법은 무엇입니까?

2017 업데이트

환경에 따라 조건부 주석은 IE10 +에서 공식적으로 사용되지 않으며 제거 되었습니다.

기발한

가장 간단한 방법은 HTML에서 Internet Explorer 조건부 주석 을 사용하는 것입니다 .

<!--[if IE]>
<style>
    .actual-form table {
         width: 100%;
    }
</style>
<![endif]-->

스타일 시트 내에서 IE만을 대상으로 할 수 있는 수많은 핵 (예 : 밑줄 핵 )이 있지만 모든 플랫폼에서 IE의 모든 버전을 대상으로하면 매우 지저분 해집니다.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #myElement {
        /* Enter your style code */
   }
}

설명 : Microsoft 특정 매체 조회입니다. Microsoft IE에 고유 한 -ms-high-contrast 속성을 사용하면 Internet Explorer 10 이상에서만 구문 분석됩니다. 미디어 쿼리의 유효한 값을 모두 사용 했으므로 사용자가 고 대비를 활성화했는지 여부에 관계없이 IE에서만 구문 분석합니다.

IE 조건부 주석 외에도 IE6을 IE10으로 타겟팅하는 방법에 대한 업데이트 된 목록 입니다.

IE 이외의 특정 CSS 및 JS 해킹을 참조하십시오 .

/***** Attribute Hacks ******/

/* IE6 */
#once { _color: blue }

/* IE6, IE7 */
#doce { *color: blue; /* or #color: blue */ }

/* Everything but IE6 */
#diecisiete { color/**/: blue }

/* IE6, IE7, IE8, but also IE9 in some cases :( */
#diecinueve { color: blue\9; }

/* IE7, IE8 */
#veinte { color/*\**/: blue\9; }

/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */

/* IE8, IE9 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

/* IE9, IE10, IE11 */
@media screen and (min-width:0\0) {
    #veintidos { color: red}
}


/***** Selector Hacks ******/

/* IE6 and below */
* html #uno  { color: red }

/* IE7 */
*:first-child+html #dos { color: red }

/* IE8 (Everything but IE 6,7) */
html>/**/body #cuatro { color: red }

/* Everything but IE6-8 */
:root *> #quince { color: red  }

/* IE7 */
*+html #dieciocho {  color: red }

/* IE 10+ */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   #veintiun { color: red; }
}

IE에서 사용할 수있는 몇 가지 해킹이 있습니다

스타일 시트에 조건부 주석 사용

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

헤드 섹션 CSS에 조건부 주석 사용

<!--[if IE]>
<style type="text/css">
    /************ css for all IE browsers ****************/
</style>
<![endif]-->

HTML 요소에 조건부 주석 사용

<!--[if IE]> <div class="ie-only"> /*content*/ </div> <![endif]-->

미디어 쿼리 사용

 IE10+
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 selector { property:value; }
 }

 IE6,7,9,10
 @media screen and (min-width: 640px), screen\9 {
 selector { property:value; }
 }

 IE6,7
 @media screen\9 {
  selector { property:value; }
 }

 IE8
 @media \0screen {
  selector { property:value; }
 }

 IE6,7,8
 @media \0screen\,screen\9 {
  selector { property:value; }
 }

 IE9,10
 @media screen and (min-width:0\0){
  selector { property:value; }
 }

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.

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.

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 */
}

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

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.

<!--[if !IE]><body<![endif]-->
<!--[if IE]><body class="ie"> <![endif]-->

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

For /* Internet Explorer 9+ (one-liner) */

_::selection, .selector { property:value\0; }

Only this solution perfectly work for me.

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; }

참고URL : https://stackoverflow.com/questions/11173106/apply-style-only-on-ie

'Programing' 카테고리의 다른 글

혼합 면도기와 자바 스크립트 코드 (0)	2020.05.31
웹킷 변환의 웹킷 전환시 깜박임 방지 (0)	2020.05.31
데이터 유형을 기반으로 팬더 데이터 프레임 열 목록 가져 오기 (0)	2020.05.31
C에서 포인터에 대한 포인터는 어떻게 작동합니까? (0)	2020.05.31
HttpResponseMessage 객체에 내용을 넣습니까? (0)	2020.05.31

현재글IE에만 스타일 적용

crosscheck

IE에만 스타일 적용

IE에만 스타일 적용

Welcome BrowserDetect - an awesome function.

'Programing' 카테고리의 다른 글

'Programing'의 다른글

티스토리툴바

IE에만 스타일 적용

IE에만 스타일 적용

Welcome BrowserDetect - an awesome function.

'Programing' 카테고리의 다른 글

'Programing'의 다른글

관련글

티스토리툴바