웹에서 일하면서 가장 어렵고 힘든 작업은 HTML 코딩이 아닐까 합니다. 같은 HTML, CSS임에도 불구하고 웹 브라우저의 랜더링 방식의 차이로 인해 조금씩 달라보일 때 이것을 맞추는 작업은 너무도 힘듭니다.
여기서는 익스플로러 10에서만 CSS가 적용되도록 하는 핵입니다.
/*IE10 핵*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
/*IE10에 대한 CSS 내용을 기술*/
}
위와 같이 중괄호{} 사이에 IE10에서만 적용할 CSS를 기술하면 됩니다. 아래는 그 예시입니다.
/*IE10 핵*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
select{
height: 20px;
vertical-align: -4px;
}
}
위와 같이 작성할 경우 익스플로러 10에 대해서만 select 태그에 height: 20px 과 vertical-align: -4px 이 적용되고, 나머지 웹 브라우저에서는 적용되지 않습니다.
도움이 되었길 바라며, 하루 빨리 이러한 문제가 해결되어 좀 더 쉽고 편하게 작업했으면 좋겠습니다.
아래는 참고사이트입니다.
http://www.impressivewebs.com/ie10-css-hacks/
'HTML · HTML5 · CSS' 카테고리의 다른 글
모바일에서 PC화면 100% 보이기 (0) | 2014.07.31 |
---|---|
HTML 엔터키(Enter Key)를 통한 form객체의 Submit 방지 (0) | 2013.12.23 |
메타태그를 이용한 IE 쿼크모드(호환성보기) 설정 (0) | 2013.07.31 |