[css] 스타일 시트 내에서 IE (모든 버전) 만 타겟팅하는 방법은 무엇입니까?

상속 된 프로젝트가 있으며 완전히 혼란스런 곳이 있습니다. 이것은 그들 중 하나입니다. IE (모든 버전) 만 타겟팅해야합니다.

#nav li {
    float: left;
    height: 54px;
    background: #4f5151;
    display: table;
    border-left: 1px solid grey;
}

명확하게 : 임베디드 스타일 시트 내부 에서 HTML의 태그에 ID 또는 클래스를 추가 하지 않고 사용자가 IE를 사용하는 경우 에만 테두리 스타일을 적용해야합니다 . 어떻게해야합니까?

편집 : Firefox 솔루션을 찾았습니다.

답변

Internet Explorer 9 이하 :
조건부 주석을 사용하여 아래에서 외부 스타일 시트를 사용하여 구체적으로 타겟팅하려는 모든 버전 (또는 버전의 조합)에 대해 IE 특정 스타일 시트를로드 할 수 있습니다.

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

그러나 버전 10부터는 조건부 주석이 더 이상 IE에서 지원되지 않습니다.

Internet Explorer 10 & 11 :
IE 10 및 11 특정 CSS 스타일을 배치하는 -ms-high-contrast를 사용하여 미디어 쿼리를 만듭니다. -ms-high-contrast는 Microsoft에 따라 다르며 IE 10 이상에서만 사용 가능하므로 Internet Explorer 10 이상에서만 구문 분석됩니다.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12 : @supports 규칙 사용 가능
이 규칙에 대한 모든 정보가 포함 된 링크는 다음과 같습니다.

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */
}

인라인 규칙 IE8 감지

옵션이 하나 더 있지만 IE8 이하 버전 만 감지합니다.

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

포함 된 스타일 시트를 지정할 때. 아래 버전의 미디어 쿼리 및 조건 주석을 사용해야한다고 생각합니다.

답변

다음은 모든 버전의 Internet Explorer (IE6에서 IE11 +까지), Firefox, Chrome 및 Safari (편집 : Opera 추가)에 대해 수행 할 수있는 미디어 쿼리 모음입니다.

IE 6

* html .ie6 { property: value; }

또는

.ie6 { _property: value; }

IE 7

*+html .ie7 { property: value; }

또는

*:first-child+html .ie7 { property: value; }

IE 6 및 7

@media screen\9 {
    .ie67 {
        property: value;
    }
}

또는

.ie67 { *property: value; }

또는

.ie67 { #property: value; }

IE 6, 7 및 8

@media \0screen\,screen\9 {
    .ie678 {
        property: value;
    }
}

IE 8

html>/**/body .ie8 { property: value; }

또는

@media \0screen {
    .ie8 {
        property: value;
    }
}

IE 8 표준 모드

.ie8 { property /*\**/: value\9 }

IE 8,9 및 10

@media screen\0 {
    .ie8910 {
        property: value;
    }
}

IE 9 만

@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
    // IE9 CSS
    .ie9{
        property: value;
    }
}

IE 9 이상

@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
    // IE9+ CSS
    .ie9up {
        property: value;
    }
}

IE 9 및 10

@media screen and (min-width:0\0) {
    .ie910 {
        property: value\9;
    } /* backslash-9 removes ie11+ & old Safari 4 */
}

IE 10 만

_:-ms-lang(x), .ie10 { property: value\9; }

IE 10 이상

_:-ms-lang(x), .ie10up { property: value; }

또는

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .ie10up {
        property:value;
    }
}

IE 11 이상

_:-ms-fullscreen, :root .ie11up { property: value; }

Firefox (모든 버전)

@-moz-document url-prefix() {
    .ff {
        color: red;
    }
}

Firefox (Quantum Only / Stylo)

@-moz-document url-prefix() {
    @supports (animation: calc(0s)) {
        /* Stylo */
        .ffStylo {
            property: value;
        }
    }
}

Firefox 레거시 (Stylo 이전)

@-moz-document url-prefix() {
    @supports not (animation: calc(0s)) {
        /* Gecko */
        .ffGecko {
            property: value;
        }
    }
}

웹킷 (Chrome & Safari, 모든 버전)

@media screen and (-webkit-min-device-pixel-ratio:0) {
    property: value;
}

구글 크롬 (29+)

@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    .chrome {
        property: value;
    }
}

사파리 (7.1+)

_::-webkit-full-page-media, _:future, :root .safari_only {
    property: value;
}

사파리 (6.1에서 10.0)

@media screen and (min-color-index:0) and(-webkit-min-device-pixel-ratio:0) {
    @media {
        .safari6 {
            color:#0000FF;
            background-color:#CCCCCC;
        }
    }
}

사파리 (10.1+)

@media not all and (min-resolution:.001dpcm) {
    @media {
        .safari10 {
            color:#0000FF;
            background-color:#CCCCCC;
        }
    }
}

오페라 (12+)

@media (min-resolution: .001dpcm) {
    _:-o-prefocus, .selector {
        .opera12 {
            color:#0000FF;
            background-color:#CCCCCC;
        }
    }
}

오페라 (11 이하)

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
    .opera11 {
        color:#0000FF;
        background-color:#CCCCCC;
    }
}

추가 정보 또는 추가 미디어 쿼리를 보려면 browserhacks.com 웹 사이트를 방문 하거나이 주제에 대해 쓴 이 블로그 게시물 을 확인하십시오 .

답변

사용할 때 SASS내가 사용하는 (2) 다음은 @media queriesIE 6 ~ 10 및 EDGE를 대상으로합니다.

@media screen\9
    @import ie_styles
@media screen\0
    @import ie_styles

http://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/

편집하다

또한 EDGE의 이후 버전을 사용하여 @support queries(필요한만큼 추가)

@supports (-ms-ime-align:auto)
    @import ie_styles
@supports (-ms-accelerator:auto)
    @import ie_styles

https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/

답변

스타일 시트에서만 IE를 타겟팅하기 위해이 Sass Mixin을 사용합니다.

@mixin ie-only {
  @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    @content;
  }
}

답변

IE 특정 스타일링을위한 또 다른 작업 솔루션은

<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">

그런 다음 선택기

html[data-useragent*='MSIE 10.0'] body .my-class{
        margin-left: -0.4em;
    }

답변

고 대비 모드를 사용할 때 Edge에서 사이트가 깨지는 문제가 발생한 후 Jeff Clayton이 다음 작업을 수행했습니다.

https://browserstrangeness.github.io/css_hacks.html

미친 이상한 미디어 쿼리이지만 Sass에서 사용하기가 더 쉽습니다.

@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 {
   .selector { rule: value };
}

이는 IE8에 필요한 IE 버전을 대상으로합니다.

또는 다음을 사용할 수 있습니다.

@media screen\0 {
  .selector { rule: value };
}

IE8-11을 대상으로하지만 FireFox 1.x를 트리거합니다 (사용 사례의 경우 중요하지 않음).

현재 인쇄 지원으로 테스트 중이며 정상적으로 작동하는 것 같습니다.

@media all\0 {
  .selector { rule: value };
}