IE에만 스타일 적용

184

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%

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

css internet-explorer

— 빠른 트랙
소스

1

왜 이러려고합니까? 어떤 버전의 IE를 타겟팅하고 있습니까? IE10은 어떻습니까? (일반적인 조건부 주석을 지원하지 않습니다)

— thirtydot

IE 7, 8 및 9를 타겟팅하려고합니다.

— FastTrack

IE10이 아닌 IE9를 타겟팅해야하는 이유는 무엇입니까 ? 알고 싶습니다 ...

— thirtydot

1

IE는 width: autoFirefox 또는 Chrome과 같은 다른 브라우저와 같은 방식으로 블록 요소를 해석하지 않습니다 . Chrome / Firefox에서는 width:auto블록 요소의 너비를 컨테이너의 전체 너비로 확장합니다. IE는 이것을하지 않으며 다음을 요구합니다width: 100%

— FastTrack

1

누구든지 이것을 시도 했습니까? philipnewcomer.net/2014/04/target-internet-explorer-10-11-css

— Pramesh Bajracharya

102

2017 업데이트

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

실물

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

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

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

— 제임스 알라 디스
소스

10

CSS 파일 내에서 조건부 주석을 사용하는 방법이 있습니까? 내가 도울 수 있다면 HTML을 혼란스럽게 만들고 싶지 않았습니다.

— FastTrack

2

@FastTrack-아니요, 조건부 주석은 HTML 주석이므로 마크 업에 표시되어야합니다. IE 용으로 완전히 새로운 스타일 시트를 만든 다음 조건부 주석에 정상적으로 포함시키는 경향이 있습니다.

— James Allardice 2016 년

제임스 : 나는 이것을하고 싶었지만 무언가를 바꿀 때마다 두 개의 별도 스타일 시트를 업데이트하는 데 어려움을 겪어야합니다.

— FastTrack

3

@FastTrack-아니요, IE 스타일 시트에는 IE 고유의 스타일 만 포함됩니다. 필요한 경우 기본 스타일 시트에 설정된 스타일을 재정의 할 수 있도록 기본 스타일 시트 뒤에 포함하십시오. 따라서 IE와 관련된 것을 변경하려는 경우에만 업데이트해야합니다.

— James Allardice

1

@FastTrack-예. 둘 이상의 스타일 시트에 무언가가 지정되면 나중에 포함 된 스타일 시트가 우선합니다.

— James Allardice 2016 년

284

@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에서만 구문 분석합니다.

— 히만 슈 듀 베디
소스

6

새로운 인터넷 익스플로러 (가장자리)에서는 작동하지 않으며 ms없이 추가해야합니다.

— Saad Ahmed

6

대상 가장자리 여기를 참조하십시오 : stackoverflow.com/questions/28417056/...

— 필리스 서덜랜드

6

@SaadAhmed : 실제로 문제가 있습니까? Edge는 합리적으로 잘 작동하는 브라우저이며 IE보다 훨씬 낫습니다. 따라서 많은 IE 해킹이 필요하지 않거나 신중하지 않습니까?

— Michael Scheper

1

그게 내 바보 같은 IE 문제를 해결했습니다. 수정 해 주셔서 감사합니다!

— Jester September

1

@MichaelScheper 첫 번째 코멘트에 게시 된이 버그는 여전히 최신 에지에 적용됩니다 (오늘 17). Saad의 작은 수정으로이 문제를 해결할 수있었습니다.

— SimonRabbit

54

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

— 오리올
소스

1

내가 노력하고있어 \9및 \0/대한 display클래스 선택에, 그러나 모두는 아니라 IE10에 적용됩니다. IE9 (및 그 이하)에만 신청할 수있는 방법이 있습니까?

— Tom Brito

시도해 볼 수는 \0/IE9있지만 테스트하지는 않았습니다. 조건부 절을 사용하지 않으면 그렇지 않으면 나는 IE9를 대상으로하는 다른 방법을 알고하지 않습니다

— 오리올

1

@media screen and (min-width:0\0) {해킹뿐만 아니라 IE11에 의해 구문 분석 할 것 같다 - 한 번 확인하시기 바랍니다 여러분의 의견을 업데이트 - 그것은뿐만 아니라 9, 10, 그래서.

— Rolf

@media 화면과 (-ms-high-contrast : active), (-ms-high-contrast : none) {}을 사용했습니다. 제대로 작동했습니다.

— Harsimer

43

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

— 산토스 칼세
소스

마지막으로 나열된 것 ( min-width:0\0)은 IE11

— CBarr

26

조건부 주석뿐만 아니라 CSS 브라우저 선택기 http://rafael.adm.br/css_browser_selector/ 를 사용하면 특정 브라우저를 대상으로 할 수 있습니다. 그런 다음 CSS를 다음과 같이 설정할 수 있습니다

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

조건부 주석없이 기본 스타일 시트 내에서 특정 브라우저를 대상으로 지정할 수도 있습니다.

— 프론트 엔드
소스

이것은 IE9에 영향을 미치지 않는 것 같습니다

— FastTrack

왜 그렇지 않은지 모르겠습니다 .CSS에서 .ie9 .actual-form table {width : 100 %}을 사용해보십시오. 잘하면 그것은 당신을 위해 작동합니다.

— frontendzzzguy

.ie92010 년 이후로 업데이트되지 않았기 때문에 작동하지 않습니다.

— Hanna

이것은 확실히 가장 우아한 접근법입니다. 개인적으로 페이지를 렌더링 할 때 브라우저 CSS 선택기 서버 측을 추가하는 것을 선호합니다.

— opsb

1

에이전트 문자열을 사용하고 선택기 클래스를 본문에 동적으로 추가하는 경우 작동합니다.

— pikapika

6

내 모범 사례를 위해 <head>태그 안에 IE 조건문을 작성해야한다고 생각 합니다. 내부에는 특수 스타일 시트에 대한 링크가 있습니다. 이 되어야 가 후자를 무시 그래서 모든 페이지에 동일한 즉, CSS를 사용 그래서 작은 사이트가 사용자 지정 CSS를 링크 한 후.

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

이것은 내가 생각하는 제임스 답변과 다릅니다 (개인 의견은 디자이너 팀과 함께 일하고 내 HTML 파일을 만지고 거기에서 무언가를 엉망으로 만들고 싶지 않기 때문에) html 파일에 스타일을 포함해서는 안됩니다.

— 엘라 드 실버
소스

6

이것에 조금 늦었지만 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;
}

이 해킹을 통해 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 */
}

— Osouthgate
소스

5

Welcome BrowserDetect- 멋진 기능입니다.

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

Object BrowserDetect는 또한 제공 version전을 위해 - 우리가 특정 클래스를 추가 할 수 있도록 정보를. $('*').addClass('ie9');경우 (BrowserDetect.version == 9).

행운을 빕니다....

— 아카 쉬
소스

4

그것은 실제로 IE 버전에 달려 있습니다 ... IE6-10부터 최신의 훌륭한 리소스를 발견 했습니다 .

Internet Explorer 6 용 CSS 핵

Star HTML Hack이라고하며 다음과 같습니다.

html .color {color : # F00;}이 핵은 완전히 유효한 CSS를 사용합니다.

Internet Explorer 7 용 CSS 핵

이것을 Star Plus Hack이라고합니다.

* : first-child + html .color {color : # F00;} 또는 더 짧은 버전 :

* + html .color {color : # F00;} 스타 HTML 핵과 마찬가지로 유효한 CSS를 사용합니다.

Internet Explorer 8 용 CSS 핵

@media \ 0screen {.color {color : # F00;}}이 핵은 유효한 CSS를 사용하지 않습니다.

Internet Explorer 9 용 CSS 핵

: root .color {color : # F00 \ 9;}이 핵은 유효한 CSS를 사용하지 않습니다.

2013.02.04 추가 : 불행하게도 IE10은이 핵을 이해합니다.

Internet Explorer 10 용 CSS 핵

@media screen 및 (-ms-high-contrast : active), (-ms-high-contrast : none) {.color {color : # F00;}}이 핵은 유효한 CSS를 사용하지 않습니다.

— 피클 러
소스

마지막 하나는 IE11에 적용

— CBarr

2

/ * Internet Explorer 9 이상 (한 줄짜리) * /

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

이 솔루션 만 완벽하게 작동합니다.

— 라히 샤
소스

나는 이것이 괴롭힘이라는 것을 알고 있지만 이것은 매우 매끄러운 것처럼 보입니다. 그러나, 나는 그것이 약간 비전 / 비잔틴처럼 보이기 때문에 정확히 무엇을하고 있는지 잘 모르겠습니다. 이 진술의 의미를 아는 사람이 있습니까? (끝에 _ :: 및 \ 0처럼?)

— Adam R. Turner

1

또한 Chrome에 대한 규칙을 적용합니다. /

— trincot

2

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

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

— dxc111
소스

2

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

이것은 Edge 및 모든 IE에서 작동합니다.

:-ms-lang(x), .selector { color: red; }

— 스 리니 바산 N
소스