CSS @ import 문을 다시 작성하는 방법

Question

내 응용 프로그램에 아래의 CSS 코드가 있으므로 가져 오기를 사용하여 CSS를 다시 작성해야합니다.

IE가 버전 6인지 먼저 확인하고, 그렇다면 빈 문자열이 아니라면 특정 CSS를 가져옵니다.

여기에서 가져 오기가 실제로 필요한가요? 나는 이것이 모든 css 파일의 끝에 이것을 써야만한다면 이것이 우선 순위가 될 것이라고 추측하고있다.

@import "javascript:(/msie 6/gi.test(navigator.userAgent)) ? 'table.menu tr.highlight td.icon img { filter: none !important; margin-left: 1px !important; margin-right: 3px !important; margin-top: 1px !important; margin-bottom: 3px !important;)' : ''"; 

Answer 1

.css 파일에서 선언 앞에 (* html)을 추가하여 ie6 범위로 '해킹'할 수 있습니다.

IE-6 만

* html .selector { 
    /* this will apply to ie6 only */ 
} 

은 또한 밑줄 해킹을 사용할 수 있지만이 CSS 파일에서 유효성 검사 오류가 발생합니다. 참고로, 여기에 예입니다 :

.selector { 
    margin:0; 
    _margin-left:5px; /* only IE6 */ 
} 

그래서 당신은 시도 할 수 있습니다 :

* html table.menu tr.highlight td.icon img { 
    filter: none !important; 
    margin-left: 1px !important; 
    margin-right: 3px !important; 
    margin-top: 1px !important; 
    margin-bottom: 3px !important; 
} 

.CSS가 IE를 대상으로 해킹에 대한 더 많은 정보를 정기적으로해야하는 경우 some examples here을 읽을 수 있습니다.

IE-6 ONLY 
* html #div { 
    height: 300px; 
} 

IE-7 ONLY 
*+html #div { 
    height: 300px; 
} 

IE-8 ONLY 
#div { 
    height: 300px\0/; 
} 

IE-7 & IE-8 
#div { 
    height: 300px\9; 
} 

NON IE-7 ONLY: 
#div { 
    _height: 300px; 
} 

Hide from IE 6 and LOWER: 
#div { 
    height/**/: 300px; 
} 

html > body #div { 
     height: 300px; 
} 

조건부 기술과 @import를 '대체'할 경우

후, 사용자 PeterVR 대답은 HTML 문서의 헤더 부분에 마이크로 소프트 조건부 주석을 사용하여 점 이상입니다.

Answer 2

CSS에서 가져 오기가 아닌 head 요소의 조건부 주석을 사용하십시오. 이것은 IE 6 단으로 분리됩니다.이 상황에서

<!--[if IE 6]> 
    <style type="text/css"> 
     table.menu tr.highlight td.icon img { 
      filter: none !important; 
      margin-left: 1px !important; 
      margin-right: 3px !important; 
      margin-top: 1px !important; 
      margin-bottom: 3px !important; 
     } 
    </style> 
<![endif]--> 

는하지만, 전용 IE6 스타일 시트를 만들고에 그 추가 어느 쪽이든이 작동 아마 좋습니다.

Answer 3

가 개인적으로 별도의 스타일 시트에 IE6 스타일을두고, 그것을 포함하도록 내 HTML의 머리에 조건부 주석을 사용 :

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

기술은 아주 잘 여기에 설명되어 있습니다 : http://css-tricks.com/how-to-create-an-ie-only-stylesheet/

이 기술은 대부분의 다른 IE 버전에서도 잘 작동합니다. @Milkywayspatterns에 설명 된대로 인라인 해킹에이 기술을 선호합니다. 코드가 훨씬 깨끗하고 읽기 쉽고 유지 관리가 쉽기 때문입니다. 또한 그것은 IE 만 css가 실제 브라우저에 의해로드되는 것을 방지합니다. 그들은 코드를 무시하고 (결국은 코멘트이므로) IE 사용자 만이 추가 바이트가로드 될 때까지 기다려야합니다. ...

그리고 IE6를 계속 지원해야하는 것을 부러워하지 않습니다!