IE10 핵

웹에서 일하면서 가장 어렵고 힘든 작업은 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/