[css] 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; }
 }

답변

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

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

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

답변

내 모범 사례를 위해 <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 파일에 스타일을 포함해서는 안됩니다.

답변

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