it-source

IE에만 스타일 적용

criticalcode 2023. 8. 19. 10:25
반응형

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

7, 7, 8, 9 "보기"를 .width: 100%

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

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

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

2017년 업데이트

환경에 따라 IE10+에서는 조건부 설명이 공식적으로 더 이상 사용되지 않으며 제거되었습니다.

원래의

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

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

스타일시트 내에서 IE만 대상으로 지정할 수 있는 수많은 해킹(예: 밑줄 해킹)이 있지만, 모든 플랫폼에서 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; }
 }

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

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

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

을 는최의위해관다생니각합한다작 안에 합니다.<head>내부에 당신의 특별한 스타일 시트에 대한 링크가 있는 태그.이것은 당신의 커스텀 css 링크 다음이어야 하므로 후자를 무시하고, 나는 작은 사이트를 가지고 있어서 모든 페이지에 동일한 iecss를 사용합니다.

<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 파일에 스타일을 포함해서는 안 됩니다.

이것은 조금 늦었지만 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 */
}

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

행운을 빕니다...

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

IE 버전에 따라 다릅니다.IE6-10의 최신 자료는 다음과 같습니다.

Internet Explorer 6용 CSS 해킹

이것은 스타 HTML 해킹이라고 불리며 다음과 같이 보입니다.

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

Internet Explorer 7용 CSS 해킹

그것은 스타 플러스 해킹이라고 불립니다.

*: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를 사용하지 않습니다.

/* Internet Explorer 9+(원라이너) */

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

오직 이 해결책만이 나에게 완벽하게 효과가 있습니다.

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

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

Internet Explorer와 같은 오래된 브라우저에서 CSS를 숨기는 방법

Internet Explorer 1-11을 대상으로 할 수 있는 완벽한 Javascript 프리 CSS 기반 솔루션이 있습니다!아래의 제 솔루션은 모든 최신 시트에서 IE1-7을 숨김으로써 작동합니다.@importIE1-7에 깨끗한 흰색 페이지 레이아웃을 제공한 다음, 가져온 시트에서 IE8-11을 분리하기 위해 세 개의 간단한 CSS 미디어 쿼리 "해크"를 사용합니다.Mac의 IE에도 영향을 미칩니다.그리고 IE 조건부 코멘트는 필요하지 않습니다.

이 솔루션을 사용하면 다시는 Internet Explorer용 웹 응용 프로그램을 사용자 지정할 필요가 없으며 모든 웹 사이트에서 최첨단 CSS를 사용하여 안전하게 진행할 수 있습니다.무엇보다 자바스크립트가 없어도 작동합니다!!

작동 방식

먼저 세 개의 CSS 스타일 시트를 만듭니다.

  1. "올드브라우저.css"
  2. "모던브라우저.CSS"
  3. "Import.css".

첫 번째 스타일시트인 "OldBrowser"는 기본 요소 "재설정" 스타일시트로, 이전 브라우저와 새 브라우저 모두에 간단한 흰색 블록 레벨 레이아웃을 제공하며 모든 웹 브라우저의 모든 요소에 스타일을 지정할 수 있습니다.이를 통해 20년 이상의 웹 브라우저와 해당 요소가 모두 동일한 HTML 디자인을 사용하고 비슷하게 보이도록 할 수 있습니다.이 시트는 IE1-11에서도 볼 수 있습니다.이 시트에 요소 스타일에만 필요한 모든 기본 스타일을 추가합니다.두 번째 시트인 "ModernBrowser.css"는 HTML5 현대 디자인으로 요소를 모두 스타일링하지만 레이아웃 등을 제어하는 모든 최신 CSS를 안전하게 배치할 수 있는 곳입니다. IE1-7에서는 이 시트를 볼 수 없습니다.세 번째 시트는 "Import.css"라는 가져오기 시트로, 위에서 언급한 두 번째 시트와 단일 시트를 사용하여 모든 고급 CSS 스타일 시트를 로드합니다.@import브라우저에서 . 에서는 "에서는 ". 이는 칙 입니다. 이것은 IE1-7을 포함한 광범위한 이전 브라우저로부터 현대 스타일 시트를 숨깁니다. IE1-11은 "Import.css" 시트를 볼 수 있지만 IE1-7은 다음 때문에 "ModernBrowers.css" 시트를 볼 수 없습니다.@import 규칙.

<link media="screen" rel="stylesheet" type="text/css" href="OldBrowsers.css" />
<link media="screen" rel="stylesheet" type="text/css" href="Import.css" />

"Import.css" 시트에 이 @import 규칙을 아래 형식과 동일하게 추가합니다.이 "ModernBrowser.css" 시트는 IE1-7 및 아래 나열된 광범위한 이전 브라우저에서 숨겨집니다.

@import 'ModernBrowsers.css' all;

가져온 시트의 모든 CSS는 Internet Explorer 1-7 및 광범위한 이전 브라우저에서 숨겨집니다. 브라우저는 미디어 "을 이해하지 , "all"을 이해하지 못합니다.@import위에 표시된 형식이므로 이 시트를 가져오지 못합니다.이 특정 버전의 가져오기는 많은 이전 브라우저(2001년 이전)에서 인식되지 않습니다.그 브라우저들은 이제 너무 오래되었기 때문에 당신은 그들에게 콘텐츠 블록이 쌓여 있는 깨끗한 흰색 웹 페이지를 제공하기만 하면 됩니다.

"Old Browser"에 추가하는 CSS를 사용하면 이전 브라우저와 IE1-7을 설정하여 사용자가 제어하는 일반 스타일을 사용할 수 있습니다.저는 개인적으로 이 시트에 HTML "reset" 요소 스타일링만 추가하고 모든 HTML5 요소가 단순하고 깨끗한 디자인인지 확인합니다.최신 브라우저는 "ModernBrowsers.css" 스타일 시트에서 이들 브라우저에 캐스케이드됩니다.

"ModernBrowser.css"에서 당신은 당신의 모든 현대 스타일을 추가하고 싶지만, 또한 CSS 미디어 쿼리를 사용하여 Internet Explorer 8-11을 대상으로 하는 특별한 CSS 해킹을 가지고 있습니다.최신 스타일시트에 다음 IE 전용 수정 사항을 추가하여 이러한 마지막 특정 IE 브라우저를 대상으로 지정하기만 하면 됩니다.이전 IE 브라우저와 관련된 모든 스타일을 이 블록에 놓습니다.

참고: HTML5를 염두에 두고 대부분의 CSS3는 일반적으로 Internet Explorer 9부터 11까지 지원됩니다.그러나 IE8-11에는 버그, 누락된 요소 지원 및 기타 문제가 있으며 Trident Edge 브라우저도 누락되었습니다.그러나 이제 이러한 방식으로 이전 IE 8-11 브라우저를 안전하게 대상으로 지정할 수 있으며, 앞으로 다른 모든 최신 브라우저에 대해 이 시트 내의 최첨단 CSS를 사용할 수 있습니다.

/* IE8 */
@media \0screen {
    body {
        background: red !important;
    }
}

/* IE9 */
@media all and (min-width:0\0) and (min-resolution:.001dpcm) {
    body {
        background: blue !important;
    }
}

/* IE10-11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    body {
        background: green !important;
    }
}

단순합니다! 이제 IE1-11(모든 Internet Explorer 브라우저)의 대상 스타일이 되었습니다.

이 솔루션을 사용하면 다음과 같은 이점을 얻을 수 있습니다.

  1. 그@importIE 1-7을 최신 스타일에서 완전히 제외합니다!이러한 에이전트는 아래 목록과 함께 현대적인 가져온 스타일을 볼 수 없으며 이전 브라우저에서 여전히 사용할 수 있는 깨끗한 흰색 스타일 시트 콘텐츠 페이지를 얻을 수 있습니다(스타일링하려면 "OldBrowser.css"를 사용하십시오).의 "ModernBrowser.css"를 하는 "됩니다.@import 규칙: 규칙:

    • Windows Internet Explorer 1-7.x
    • Macintosh Internet Explorer 1-5.x
    • 넷스케이프 1-4.8
    • 오페라 1-3.5
    • Konqueror 1-2.1
    • Windows Amaya 1-5.1
    • iCab 1-2
    • 옴니웹

  2. "ModernBrowser"가 가져온 시트에서 이제 간단한 미디어 쿼리 "hacks"를 사용하여 IE 브라우저 버전 8-11을 안전하게 대상으로 지정할 수 있습니다.

  3. 이템은단을 합니다.@import여러 시트에 분산된 CSS 수정 대신 외부 스타일 규칙을 지원하지 않는 기존 방식을 사용하여 빠르고 관리 가능한 스타일 시트 시스템(BTW...▁saying▁to라고 말하는 것을 듣지 마세요.@import느리긴 하지만, 그렇지 않습니다.내 가져오기 시트는 한 줄로 되어 있고 크기는 킬로바이트 이하입니다!@importWWW의 탄생 이후 사용되었으며 단순한 CSS 링크와 다를 바 없습니다.이것을 오늘날의 자바스크립트 아이들이 뉴스의 작은 단락을 표시하기 위해 이 새로운 "현대적인" ECMA스크립트 SPA API를 사용하여 브라우저로 밀어넣고 있는 메가바이트와 비교해 보십시오!) 하나@import라인은 이제 당신의 새로운 CSS 코드와 화려한 레이아웃 디자인으로부터 수년간의 IE 브라우저 버전을 분리합니다.스크립팅이 필요하지 않습니다!

  4. 모든 오래된 IE 브라우저와 광범위한 다른 사용자 에이전트는 이제 이 가져오기 전략을 사용하여 현대 스타일에서 제외됩니다. 이는 오래된 브라우저가 이전 브라우저에서 완전히 액세스할 수 있는 일반, "블록 수준", 화이트 페이지 및 스택된 콘텐츠 레이아웃으로 다시 접을 수 있게 합니다.이제 오래된 브라우저에 맞게 콘텐츠를 사용자 정의하는 데 최소한의 시간을 할애할 수 있으며, 대신 웹 사이트에서 수천 페이지에 걸쳐 일반적인 흰색 콘텐츠 페이지를 볼 수 있습니다.

  5. 이 솔루션에는 IE 조건부 설명이 없습니다!IE 10-11은 더 이상 IE 조건을 지원하지 않으므로 사용하면 안 됩니다.

  6. 이 솔루션을 통해 현대적인 웹 디자인은 이제 이전 브라우저와 IE1-11에 대해 다시는 걱정할 필요 없이 사용자 지정 최첨단 CSS3 기술을 100% 무료로 사용할 수 있습니다!

  7. 링크드 CSS는 1995년 이전의 CSS1 브라우저에서도 매우 광범위한 지원을 제공합니다.임베디드 또는 "스타일" 요소 스타일을 사용하지 않는 또 다른 이유입니다.대신 이러한 연결된 CSS 설계를 사용합니다.

  8. "Old Browser" 스타일시트에 정말 좋은 "재설정" 또는 요소 스타일 세트를 추가한 경우, 20년 이상의 구형 및 신형 브라우저와 기본 요소 설계를 통해 한 장의 시트를 사용하여 핵심 웹 페이지 설계가 동일하게 보이도록 할 수 있습니다."reset" 요소 CSS를 사용하는 아이디어는 CSS 레이아웃, 스크립팅 및 고급 CSS 설계를 적용하기 전에 모든 브라우저가 역사를 통해 동일하게 보이도록 강제하는 것입니다.HTML의 기본 요소는 지난 25년 동안 거의 변하지 않았습니다.따라서 텍스트 내용 표시를 단순화하기 위해 먼저 스타일 요소를 사용하는 것이 좋습니다.

이것은 크로스 브라우저 스타일 문제를 해결하기 위한 2021년 새로운 "진보적" CSS, 100% JavaScript가 없는 설계 개념의 일부입니다. 여기서 오래된 에이전트는 복잡한 CSS 레이아웃과 일치하도록 암호화된 오래되고 고장난 박스 모델 에이전트(IE5-6)의 문제를 해결하기 위해 고군분투하는 대신 간단한 레이아웃으로 우아하게 성능을 저하시킬 수 있습니다.대부분의 오래된 웹 브라우저는 더 이상 사용자 정의 레이아웃을 다시 작성할 필요가 없습니다.그들은 기본적인 텍스트와 미디어 콘텐츠를 표시하기만 하면 됩니다.온라인에서 천천히 소멸되는 긴 꼬리를 가진 IE 1-11은 컨텐츠를 읽고 액세스할 수 있도록 단순한 레이아웃 설계가 필요합니다.

이 전략의 장점은 100% Javascript가 없다는 것입니다!어쨌든 2021년에는 웹 브라우저에서 CSS를 관리하기 위해 스크립팅을 사용해서는 안 됩니다.웹 브라우저에서 Internet Explorer를 관리할 때 Modernizr과 모든 "polyfill"을 덤프하고 대신 내 깨끗한 CSS 솔루션을 사용해 보는 것이 좋습니다.나의 솔루션은 IE1-11을 대상으로 효과적이며, 대상 브라우저에 CSS를 사용자 지정하는 방법을 완벽하게 제어하는 동시에 디자이너로서 Edge 및 기타 모든 최신 HTML5 브라우저의 최신 CSS3 및 최첨단 스타일과 레이아웃에 집중할 수 있습니다.저는 2004년부터 이것의 버전을 사용해 왔지만, 최근 2021년으로 업데이트했습니다.

몇 년 전에 몇 줄의 간단한 계단식 스타일 시트 코드로 해결되었던 문제를 해결하기 위해 이러한 거대한 CPU 호그, JavaScripted, 폴리필 악몽 스크립트 솔루션을 그만 만들기를 바랍니다. :)

당신은 Git에서 무료로 나의 완전한 Universal CSS Framework를 얻을 수 있는데, 그것은 이 같은 코드와 더 많은 좋은 것들을 사용합니다!

언급URL : https://stackoverflow.com/questions/11173106/apply-style-only-on-ie

반응형

'it-source' 카테고리의 다른 글

Gitdiff --이름만 사용하고 해당 목록을 복사합니다.  (0) 2023.08.19
장고 관리자에서 "list_display"로 다대다 필드를 표시하는 방법은 무엇입니까?  (0) 2023.08.19
자바스크립트로 모든 인라인 스타일을 지우고 css 스타일 시트에 지정된 스타일만 남기려면 어떻게 해야 합니까?  (0) 2023.08.19
Mac OS X에서 C 프로그램을 컴파일하고 실행하는 방법  (0) 2023.08.19
스트럿츠2 대 스프링3  (0) 2023.08.19

'it-source'의 다른글

  • 현재글IE에만 스타일 적용

관련글

댓글

티스토리툴바