스타일시트 내에서 IE(모든 버전)만을 대상으로 하는 방법은 무엇입니까?
저는 물려받은 프로젝트가 있는데 완전히 엉망인 곳이 있습니다.이것이 그들 중 하나입니다.HTML에 대한 변경 없이 자바스크립트나 CSS를 제외한 다른 기술 없이 IE(어떤 버전이든)만을 대상으로 하면 됩니다. »
#nav li {
float: left;
height: 54px;
background: #4f5151;
display: table;
border-left: 1px solid grey;
}
분명히 해야 할 일:내장된 스타일시트 안에서 HTML의 태그에 ID나 클래스를 추가하지 않고 사용자가 IE를 사용하는 경우에만 테두리 스타일을 적용해야 합니다.어떻게 해야 하나요?
편집: Firefox에 대한 솔루션을 찾았습니다. 이를 반영하기 위해 질문을 편집합니다.
Internet Explorer 9 이하: 조건부 주석을 사용하여 특정 대상으로 지정할 버전(또는 버전 조합)에 대한 IE별 스타일시트를 로드할 수 있습니다.아래와 같이 외부 스타일시트를 사용합니다.
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->
그러나 버전 10부터는 IE에서 조건부 주석이 더 이상 지원되지 않습니다.
Internet Explorer 10 & 11 : -ms-high-contrast를 사용하여 미디어 쿼리를 만듭니다. 여기에 IE 10 및 11 특정 CSS 스타일을 배치합니다.-ms-high-contrast는 Microsoft에 따라 다르므로(IE 10+에서만 사용 가능) Internet Explorer 10 이상에서만 구문 분석됩니다.
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS styles go here */
}
Microsoft Edge 12: @supports 규칙을 사용할 수 있습니다. 이 규칙에 대한 모든 정보가 포함된 링크가 여기 있습니다.
@supports (-ms-accelerator:true) {
/* IE Edge 12+ CSS styles go here */
}
인라인 규칙 IE8 탐지
나는 옵션이 하나 더 있지만 IE8 이하 버전만 감지합니다.
/* For IE css hack */
margin-top: 10px\9 /* apply to all ie from 8 and below */
*margin-top:10px; /* apply to ie 7 and below */
_margin-top:10px; /* apply to ie 6 and below */
내장된 스타일시트에 대해 지정한 대로입니다.아래 버전은 미디어 쿼리와 조건 설명을 사용해야 할 것 같습니다.
SASS를 사용할 때 다음 2개의 미디어 쿼리를 사용하여 IE 6-10 및 Edge를 대상으로 합니다.
@media screen\9
@import ie_styles
@media screen\0
@import ie_styles
https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
또한 다음을 사용하여 최신 버전의 Edge를 대상으로 합니다.@supports(필요한 만큼 추가)
@supports (-ms-ime-align:auto)
@import ie_styles
@supports (-ms-accelerator:auto)
@import ie_styles
https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/
스타일시트에서 IE만을 대상으로 하는 경우 다음 Sass Mixin을 사용합니다.
@mixin ie-only {
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
@content;
}
}
고대비 모드를 사용할 때 Edge에서 사이트가 손상되는 문제를 경험한 후 Jeff Clayton의 다음 작업을 발견했습니다.
https://browserstrangeness.github.io/css_hacks.html
말도 안 되는 이상한 미디어 쿼리지만 Sass에서 사용하기 더 쉽습니다.
@media screen and (min-width:0\0) and (min-resolution:+72dpi), \0screen\,screen\9 {
.selector { rule: value };
}
이는 IE 버전이 IE8에 기대하는 대상입니다.
또는 다음을 사용할 수 있습니다.
@media screen\0 {
.selector { rule: value };
}
이는 IE8-11을 대상으로 하지만 FireFox 1.x를 트리거합니다(내 사용 사례에는 상관 없음).
현재 인쇄 지원을 사용하여 테스트 중이며, 문제가 없는 것 같습니다.
@media all\0 {
.selector { rule: value };
}
IE별 스타일링을 위한 또 다른 작동 솔루션은 다음과 같습니다.
<html data-useragent="Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)">
그리고 당신의 선택자는
html[data-useragent*='MSIE 10.0'] body .my-class{
margin-left: -0.4em;
}
언급URL : https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet
'programing' 카테고리의 다른 글
| iOS 개발:장치에서 메모리 부족 경고를 발생시키는 방법은 무엇입니까? (0) | 2023.08.23 |
|---|---|
| Mac/OS X에서 /var/lib/docker는 어디에 있습니까? (0) | 2023.08.23 |
| div contentedable 요소에 포커스 설정 (0) | 2023.08.23 |
| 검색을 수행하기 전에 라이브 jQuery 검색을 잠시 기다리려면 어떻게 해야 합니까? (0) | 2023.08.23 |
| csv 가져오기 판다 중 행 건너뛰기 (0) | 2023.08.23 |