IE 11을 위한 CSS 해킹을 작성하는 방법은 무엇입니까?
IE 11에 대해서만 어떻게 CSS를 해킹하거나 쓸 수 있습니까?저는 IE 11에서 나쁘게 보이는 웹사이트를 가지고 있습니다.저는 여기저기 검색만 하고 있는데 아직 해결책을 찾지 못했습니다.
CSS 선택기가 있습니까?
IE11을 필터링하려면 Microsoft 관련 CSS 규칙 조합을 사용합니다.
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>
이와 같은 필터는 다음과 같은 이유로 인해 작동합니다.
사용자 에이전트가 실렉터를 구문 분석할 수 없는 경우(즉, 유효한 CSS 2.1이 아닌 경우) 실렉터와 다음 선언 블록(있는 경우)도 무시해야 합니다.
<!doctype html>
<html>
<head>
<title>IE10/11 Media Query Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
@media all and (-ms-high-contrast:none)
{
.foo { color: green } /* IE10 */
*::-ms-backdrop, .foo { color: red } /* IE11 */
}
</style>
</head>
<body>
<div class="foo">Hi There!!!</div>
</body>
</html>레퍼런스
- Internet Explorer 특정 CSS 또는 Internet Explorer 특정 JavaScript 코드와 같은 특정 상황에 대해 Internet Explorer 10만 대상으로 지정하려면 어떻게 해야 합니까?
- 마이크로소프트 CSS 확장
- CSS 2.1: 규칙 집합, 선언 블록 및 선택기
진화하는 스레드를 고려하여 아래를 업데이트했습니다.
IE 11(이상)
_:-ms-fullscreen, :root .foo { property:value; }
IE 10 이상
_:-ms-lang(x), .foo { property:value; }
또는
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
.foo{property:value;}
}
IE 10만
_:-ms-lang(x), .foo { property:value\9; }
IE 9 이상
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
//.foo CSS
.foo{property:value;}
}
IE 9 및 10
@media screen and (min-width:0\0) {
.foo /* backslash-9 removes.foo & old Safari 4 */
}
IE 9만 해당
@media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
//.foo CSS
.foo{property:value;}
}
IE 8, 9 및 10
@media screen\0 {
.foo {property:value;}
}
IE 8 표준 모드만 해당
.foo { property /*\**/: value\9 }
IE 8
html>/**/body .foo {property:value;}
또는
@media \0screen {
.foo {property:value;}
}
IE 7
*+html .foo {property:value;}
또는
*:first-child+html .foo {property:value;}
IE 6, 7, 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6 및 7
@media screen\9 {
.foo {property:value;}
}
또는
.foo { *property:value;}
또는
.foo { #property:value;}
IE 6, 7, 8
@media \0screen\,screen\9 {
.foo {property:value;}
}
IE 6
* html .foo {property:value;}
또는
.foo { _property:value;}
자바스크립트 대안
모데니즈르
Modernizr은 페이지 로드에서 빠르게 실행되어 기능을 탐지한 다음 결과로 JavaScript 개체를 만들고 html 요소에 클래스를 추가합니다.
사용자 에이전트 선택
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':'');
를 추예다니합가을 ")에합니다.html요소:
data-useragent='Mozilla/5.0 (compatible; M.foo 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;
}
각주
가능한 경우 해킹 없이 문제를 식별하고 해결합니다.점진적인 향상 및 우아한 성능 저하를 지원합니다.그러나 위의 내용이 몇 가지 좋은 옵션을 제공하는 데 도움이 될 것이기 때문에 항상 얻을 수 있는 것은 아닙니다.
귀인 / 필수 판독치
여기에 IE10과 11에 대한 해킹이 있는 두 단계 솔루션이 있습니다.
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
IE10과 IE11은 -ms-높은 대비를 지원하기 때문에 이 두 브라우저를 대상으로 할 수 있습니다.
그리고 만약 당신이 IE10을 여기서 제외하고 싶다면 당신은 다음과 같이 IE10 특정 코드를 만들어야 합니다. 그것은 사용자 에이전트 트릭을 사용하기 때문에 당신은 이 Javascript를 추가해야 합니다.
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
그리고 이 HTML 태그.
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
그리고 이제 당신은 CSS 코드를 이렇게 쓸 수 있습니다.
html[data-useragent*='MSIE 10.0'] h1 {
color: blue;
}
자세한 정보는 이 웹사이트, will tutorail, Chris tutorial을 참조하십시오.
IE11 이상을 대상으로 하고 싶다면 다음과 같이 확인할 수 있습니다.
_:-ms-fullscreen, :root .selector {}
다음은 더 많은 정보를 얻을 수 있는 좋은 자료입니다. browserhacks.com
저는 2013년 가을부터 이것들을 작성하여 BrowserHacks.com 에 기여해 왔습니다. 제가 작성한 것은 매우 단순하고 IE 11에서만 지원됩니다.
<style type="text/css">
_:-ms-fullscreen, :root .msie11 { color: blue; }
</style>
그리고 물론 디브는...
<div class="msie11">
This is an Internet Explorer 11 CSS Hack
<div>
따라서 텍스트는 인터넷 익스플로러 11과 함께 파란색으로 표시됩니다.그걸로 재미 좀 봐.
-
라이브 테스트 사이트에서 IE 및 기타 브라우저 CSS 해킹 추가:
업데이트됨: http://browserstrangeness.bitbucket.io/css_hacks.html
미러: http://browserstrangeness.github.io/css_hacks.html
(만약 당신이 MS Edge CSS Hacks도 찾고 있다면, 그곳이 바로 갈 곳입니다.)
스타일 태그 내에서 다음 코드를 사용할 수 있습니다.
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
}
다음은 저에게 도움이 된 예입니다.
<style type="text/css">
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/* IE10+ specific styles go here */
#flashvideo {
width:320px;
height:240;
margin:-240px 0 0 350px;
float:left;
}
#googleMap {
width:320px;
height:240;
margin:-515px 0 0 350px;
float:left;
border-color:#000000;
}
}
#nav li {
list-style:none;
width:240px;
height:25px;
}
#nav a {
display:block;
text-indent:-5000px;
height:25px;
width:240px;
}
</style>
(#navli) 및 (#nava)는 @media 화면 밖에 있으므로 일반적인 스타일입니다.
그래서 저는 결국 이 문제에 대한 저만의 해결책을 찾았습니다.
Microsoft 설명서를 검색한 후 새로운 IE11 전용 스타일을 찾을 수 있었습니다.msTextCombineHorizontal
저는 테스트에서 IE10 스타일을 확인하고 긍정적인 일치가 있으면 IE11 전용 스타일을 확인합니다.찾으면 IE11+이고 없으면 IE10입니다.
코드 예: CSS 기능 테스트(JSFidle)를 통해 IE10 및 IE11 탐지
코드 예제를 발견하면 더 많은 스타일로 업데이트하겠습니다.
참고: 이를 통해 IE12 및 IE13이 "IE11"로 거의 확실하게 식별될 수 있습니다. 이러한 스타일은 앞으로 계속 이어질 것입니다.새로운 버전이 출시됨에 따라 추가 테스트를 추가할 것이며, 모데니즈르에 다시 의존할 수 있기를 바랍니다.
저는 이 테스트를 폴백 동작에 사용하고 있습니다.폴백 동작은 화려하지 않은 스타일링일 뿐 기능성이 떨어지는 것은 아닙니다.
js를 사용하고 html에 클래스를 추가하여 조건부 주석의 표준을 유지할 수 있습니다.
var ua = navigator.userAgent,
doc = document.documentElement;
if ((ua.match(/MSIE 10.0/i))) {
doc.className = doc.className + " ie10";
} else if((ua.match(/rv:11.0/i))){
doc.className = doc.className + " ie11";
}
또는 bowser와 같은 lib를 사용합니다.
또는 기능 감지를 위한 modernizr:
이것이 도움이 되었습니다.
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Trident/7.0; rv:11.0') !== false) { ?>
<script>
$(function(){
$('html').addClass('ie11');
});
</script>
<?php } ?>
을 추다니가합 하세요.<head>문서
언급URL : https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11
'programing' 카테고리의 다른 글
| 도커가 포트를 호스트에만 노출 (0) | 2023.08.23 |
|---|---|
| Android 에뮬레이터의 실행 속도 향상 (0) | 2023.08.23 |
| CSS를 사용하여 숫자를 원으로 둘러싸는 방법은 무엇입니까? (0) | 2023.08.23 |
| Swift에서 단추 제목 정렬을 변경하는 방법은 무엇입니까? (0) | 2023.08.23 |
| CSS를 사용하여 오른쪽에서 배경 이미지 오프셋 (0) | 2023.08.23 |