어떻게 하나 대상 IE7 및 IE8 유효한 CSS?
https://stackoverflow.com/questions/814219
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
고 싶은 목표 IE7 및 IE8 와 W3C 준수 CSS.때로는 고정 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 버전을 대상으로하는 해킹이 있습니다.
" 9"를 사용하여 IE8 이하를 대상으로합니다.
"*"를 사용하여 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 및 저를 렌더링하는 다양한 스타일(또한 오페라<9.5 고 사파리<3.2).
다른 트
여기에 모든 목록을 완전히 유효 CSS 브라우저별 선택을 찾을 수 있었, 를 제외하고 일부는 보이 매우 중복과 같은 사람을 선택한 1 가지의 유형의 브라우저(1, 2):
/****** 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;}
}
즉, 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
Modernizr은 기능을 감지하기 위해 페이지로드에서 빠르게 실행됩니다. 그런 다음 결과와 함께 JavaScript 객체를 생성하고 HTML 요소에 클래스를 추가합니다.
사용자 에이전트 선택
자바 스크립트 :
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':'');
아래에 (예 :)를 추가합니다 html 요소:
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'
매우 타겟팅 된 CSS 선택기 허용 : 예 :
html[data-useragent*='Chrome/13.0'] .nav{
background:url(img/radial_grad.png) center bottom no-repeat;
}
각주
가능하면 브라우저 타겟팅을 피하십시오. 식별하는 모든 문제를 식별하고 수정하십시오. 지원하다 진보적 인 향상 그리고 우아한 타락. 이를 염두에두고, 이것은 생산 환경에서 항상 얻을 수있는 '이상적인 세계'시나리오입니다. 위의 내용은 몇 가지 좋은 옵션을 제공하는 데 도움이됩니다.
귀속 / 필수 독서
IE8에는 호환성 모드가 있기 때문에 IE7 코드가 IE8에서 작동하지 않는 것에 대해 걱정할 필요는 없습니다 (IE7과 동일하게 페이지를 렌더링 할 수 있음). 그러나 여전히 다른 버전의 IE를 타겟팅하고 싶다면 한동안 수행 된 방법은 어느 쪽이든 사용하는 것입니다. 조건부 의견 또는 IE7 이하의 대상으로 A *로 CSS 규칙을 시작하십시오.. 또는 서버의 사용자 에이전트에주의를 기울이고 해당 정보를 기반으로 다른 CSS 파일을 접시 할 수 있습니다.
실제 문제는 IE8이 아니라 이전 버전의 IE에 사용하는 해킹입니다.
IE8은 표준을 준수하는 것과 매우 가깝기 때문에 해킹이 전혀 필요하지 않아야합니다. 문제는 IE6 및 IE7에 해킹을 사용하는 경우입니다. IE8이 아닌 해당 버전에만 적용해야합니다.
나는 우리 회사의 웹 사이트를 얼마 전에 IE8과 호환 가능하게 만들었습니다. 내가 실제로 변경 한 유일한 것은 페이지가 IE8 준수라고 말하는 메타 태그를 추가하는 것입니다 ...
나는 JavaScript를 사용하여 그것을했다. HTML 요소에 세 가지 CSS 클래스를 추가합니다.
ie<version>
lte-ie<version>
lt-ie<version + 1>
따라서 IE7의 경우 추가됩니다 ie7, lte-ie7 ..., lt-ie8 ...
JavaScript 코드는 다음과 같습니다.
(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);
}
}
}
}
})();
그 후, 당신은 그것을 사용합니다 .ie<version> Potench가 설명한 스타일 시트의 CSS 클래스.
(마리오의 탐사 기능을 사용했습니다 사용자가 jQuery와 함께 IE를 사용하고 있는지 확인하십시오)
LTE-IE8 및 LT-II8 등의 이점은 모든 브라우저를 IE9, 즉 IE7-IE9보다 작거나 동일하게 타겟팅 할 수 있다는 것입니다.
