유효한 CSS로 IE7 및 IE8을 어떻게 타겟팅합니까?

IT박스

유효한 CSS로 IE7 및 IE8을 어떻게 타겟팅합니까?

itboxs 2020. 11. 16. 07:58

유효한 CSS로 IE7 및 IE8을 어떻게 타겟팅합니까?

W3C 호환 CSS로 IE7 및 IE8을 타겟팅하고 싶습니다. 때때로 한 버전의 CSS를 수정해도 다른 버전은 수정되지 않습니다. 이것을 어떻게 달성 할 수 있습니까?

HTML 및 CSS를 사용하여 해킹없이 IE 버전을 명시 적으로 타겟팅

CSS에서 해킹을 원하지 않는 경우이 접근 방식을 사용하십시오. <html>나중에 브라우저에 따라 선택할 수 있도록 브라우저 고유 클래스를 요소에 추가하십시오 .

예

<!doctype html>
<!--[if IE]><![endif]-->
<!--[if lt IE 7 ]> <html lang="en" class="ie6">    <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="ie7">    <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="ie8">    <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="ie9">    <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
    <head></head>
    <body></body>
</html>

그러면 CSS에서 대상 브라우저에 매우 엄격하게 액세스 할 수 있습니다.

예

.ie6 body { 
    border:1px solid red;
}
.ie7 body { 
    border:1px solid blue;
}

자세한 내용은 http://html5boilerplate.com/을 확인 하십시오.

CSS "Hacks"를 사용하여 IE 버전 타겟팅

요점은 IE 버전을 타겟팅 할 수있는 해킹 방법입니다.

IE8 이하를 타겟팅하려면 '\ 9'를 사용하세요.
IE7 이하를 타겟팅하려면 '*'를 사용하세요.
"_"를 사용하여 IE6을 타겟팅합니다.

예:

body { 
border:1px solid red; /* standard */
border:1px solid blue\9; /* IE8 and below */
*border:1px solid orange; /* IE7 and below */
_border:1px solid blue; /* IE6 */
}

업데이트 : 대상 IE10

IE10은 조건문을 인식하지 않으므로이를 사용하여 "ie10"클래스를 <html>요소 에 적용 할 수 있습니다.

<!doctype html>
    <html lang="en">
    <!--[if !IE]><!--><script>if (/*@cc_on!@*/false) {document.documentElement.className+=' ie10';}</script><!--<![endif]-->
        <head></head>
        <body></body>
</html>

조건부 주석을 살펴보고 문제가있는 IE에 대해 별도의 시트를 만드는 것이 좋습니다.

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

귀하의 질문에 대한 답변

모든 브라우저를 선택하는 완전히 유효한 방법이지만 IE8 이하는 :not()의사 클래스를 사용하는 것 입니다. IE 버전 8 이하 :not()는를 지원하지 않으므로 이를 포함하는 선택기는 무시됩니다. 이것은 다음과 같이 할 수 있음을 의미합니다.

p {color:red;}
p:not([ie8min]) {color:blue;}

이것은 여전히 완전히 유효한 CSS이지만 IE8 이하에서는 다른 스타일을 렌더링합니다 (Opera <9.5 및 Safari <3.2).

다른 트릭

다음 은 고대 브라우저 ( 1 , 2 )의 한 가지 유형을 선택하는 것과 같이 상당히 중복 된 것으로 보이는 일부를 제외하고 는 내가 찾을 수있는 완전히 유효한 CSS 브라우저 별 선택기의 목록입니다 .

/******  First the hacks that target certain specific browsers  ******/
* html p                        {color:red;} /* IE 6- */
*+html p                        {color:red;} /* IE 7 only */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    p                           {color:red;}
}                                            /* Chrome, Safari 3+ */
p, body:-moz-any-link           {color:red;} /* Firefox 1+ */
:-webkit-any(html) p            {color:red;} /* Chrome 12+, Safari 5.1.3+ */
:-moz-any(html) p               {color:red;} /* Firefox 4+ */

/****** And then the hacks that target all but certain browsers ******/
html> body p                  {color:green;} /* not: IE<7 */
head~body p                   {color:green;} /* not: IE<7, Opera<9, Safari<3 */
html:first-child p            {color:green;} /* not: IE<7, Opera<9.5, Safari&Chrome<4, FF<3 */
html>/**/body p               {color:green;} /* not: IE<8 */
body:first-of-type p          {color:green;} /* not: IE<9, Opera<9, Safari<3, FF<3.5 */
:root p                       {color:green;} /* not: IE<9, Opera<9.5 */
body:not([oldbrowser]) p      {color:green;} /* not: IE<9, Opera<9.5, Safari<3.2 */

크레딧 및 출처 :

2015 년 현재 전체 목록은 다음과 같습니다.

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) and (min-resolution: .001dpcm) { 
 // IE9 CSS
 .ie9{property:value;}
}

IE 9 이상

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

IE 9 및 10

@media screen and (min-width:0) {
    .ie910{property:value;}
}

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

자바 스크립트 대안

모 더니 저

Modernizr runs quickly on page load to detect features; it then creates a JavaScript object with the results, and adds classes to the html element

User agent selection

The Javascript:

var b = document.documentElement;
        b.setAttribute('data-useragent',  navigator.userAgent);
        b.setAttribute('data-platform', navigator.platform );
        b.className += ((!!('ontouchstart' in window) || !!('onmsgesturechange' in window))?' touch':'');

Adds (e.g) the below to the html element:

data-useragent='Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C)'
data-platform='Win32'

Allowing very targetted CSS selectors, e.g.:

html[data-useragent*='Chrome/13.0'] .nav{
    background:url(img/radial_grad.png) center bottom no-repeat;
}

Footnote

If possible, avoid browser targeting. Identify and fix any issue(s) you identify. Support progressive enhancement and graceful degradation. With that in mind, this is an 'ideal world' scenario not always obtainable in a production environment, as such- the above should help provide some good options.

Attribution / Essential Reading

Well you don't really have to worry about IE7 code not working in IE8 because IE8 has compatibility mode (it can render pages the same as IE7). But if you still want to target different versions of IE, a way that's been done for a while now is to either use conditional comments or begin your css rule with a * to target IE7 and below. Or you could pay attention to user agent on the servers and dish up a different CSS file based on that information.

The actual problem is not IE8, but the hacks that you use for earlier versions of IE.

IE8 is pretty close to be standards compliant, so you shouldn't need any hacks at all for it, perhaps only some tweaks. The problem is if you are using some hacks for IE6 and IE7; you will have to make sure that they only apply to those versions and not IE8.

I made the web site of our company compatible with IE8 a while ago. The only thing that I actually changed was adding the meta tag that tells IE that the pages are IE8 compliant...

I did it using Javascript. I add three css classes to the html element:

ie<version>
lte-ie<version>
lt-ie<version + 1>

So for IE7, it adds ie7, lte-ie7 ..., lt-ie8 ...

Here is the javascript code:

(function () {
    function getIEVersion() {
        var ua = window.navigator.userAgent;
        var msie = ua.indexOf('MSIE ');
        var trident = ua.indexOf('Trident/');

        if (msie > 0) {
            // IE 10 or older => return version number
            return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
        } else if (trident > 0) {
            // IE 11 (or newer) => return version number
            var rv = ua.indexOf('rv:');
            return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
        } else {
            return NaN;
        }
    };

    var ieVersion = getIEVersion();

    if (!isNaN(ieVersion)) { // if it is IE
        var minVersion = 6;
        var maxVersion = 13; // adjust this appropriately

        if (ieVersion >= minVersion && ieVersion <= maxVersion) {
            var htmlElem = document.getElementsByTagName('html').item(0);

            var addHtmlClass = function (className) { // define function to add class to 'html' element
                htmlElem.className += ' ' + className;
            };

            addHtmlClass('ie' + ieVersion); // add current version
            addHtmlClass('lte-ie' + ieVersion);

            if (ieVersion < maxVersion) {
                for (var i = ieVersion + 1; i <= maxVersion; ++i) {
                    addHtmlClass('lte-ie' + i);
                    addHtmlClass('lt-ie' + i);
                }
            }
        }
    }
})();

Thereafter, you use the .ie<version> css class in your stylesheet as described by potench.

(Used Mario's detectIE function in Check if user is using IE with jQuery)

The benefit of having lte-ie8 and lt-ie8 etc is that it you can target all browser less than or equal to IE9, that is IE7 - IE9.

참고URL : https://stackoverflow.com/questions/814219/how-does-one-target-ie7-and-ie8-with-valid-css

'IT박스' 카테고리의 다른 글

URL에서 비트 맵으로 Android로드 (0)	2020.11.16
React Native 앱의 버전 번호를 업데이트하는 방법 (0)	2020.11.16
pip 제거를위한 확인 프롬프트 무시 (0)	2020.11.16
속성의 이름이 유형과 같아야합니까? (0)	2020.11.15
Runtime # exec ()를 호출하여“java.io.IOException : error = 12, Cannot allocate memory”를 해결하는 방법은 무엇입니까? (0)	2020.11.15

현재글유효한 CSS로 IE7 및 IE8을 어떻게 타겟팅합니까?

itboxs

유효한 CSS로 IE7 및 IE8을 어떻게 타겟팅합니까?

유효한 CSS로 IE7 및 IE8을 어떻게 타겟팅합니까?

귀하의 질문에 대한 답변

다른 트릭

크레딧 및 출처 :

IE 6

IE 7

IE 6 및 7

IE 6, 7, 8

IE 8

IE 8 표준 모드 전용

IE 8,9 및 10

IE 9 만

IE 9 이상

IE 9 및 10

IE 10 만

IE 10 이상

IE 11 (이상 ..)

자바 스크립트 대안

모 더니 저

User agent selection

Footnote

Attribution / Essential Reading

'IT박스' 카테고리의 다른 글

'IT박스'의 다른글

티스토리툴바

유효한 CSS로 IE7 및 IE8을 어떻게 타겟팅합니까?

유효한 CSS로 IE7 및 IE8을 어떻게 타겟팅합니까?

귀하의 질문에 대한 답변

다른 트릭

크레딧 및 출처 :

IE 6

IE 7

IE 6 및 7

IE 6, 7, 8

IE 8

IE 8 표준 모드 전용

IE 8,9 및 10

IE 9 만

IE 9 이상

IE 9 및 10

IE 10 만

IE 10 이상

IE 11 (이상 ..)

자바 스크립트 대안

모 더니 저

User agent selection

Footnote

Attribution / Essential Reading

'IT박스' 카테고리의 다른 글

'IT박스'의 다른글

관련글

티스토리툴바