IE8 시 주의사항

5663 단어 IE8JavaScriptCSS
내가 다루는 사내 웹 시스템에서는 2016년 11월 현재'IE 8 지원'을 강조하고 있다.
지원이 끊어진 브라우저를 사용하지 않았으면 좋겠지만 아무래도 안 될 것 같습니다.
그래서 IE8에 대응할 때 주의할 점을 쓰고 싶습니다.
나는 이 보도가 가능한 한 빨리 무의미한 상황이 되기를 바란다...

JavaScript


IE8에서는 ECMAScript5 기능을 거의 사용할 수 없습니다.
대응 상황은 12퍼센트다.
http://kangax.github.io/compat-table/es5/

ECMAScript5 방법에는 편리하고 사용하기 쉬운 방법이 나열되어 있습니다.
  • Array.prototype.indexOf: Strint.prototype.indexOfIE 8에서 사용하면 어느새 Array.prototype.indexOf도 사용할 수 있습니다.
  • String.prototype.trim
  • ECMAScript 이외에는 사용할 수 없는 기능입니다.
  • Event.target :
    https://developer.mozilla.org/ja/docs/Web/API/Event/target
    대응 방법
  • var target = e.target || e.srcElement;
    
  • Node.textContent: 대체Node.innerText로 사용할 수 있습니다.
    https://developer.mozilla.org/ja/docs/Web/API/Node/textContent
  • EventTarget.addEventListener , EventTarget.removeEventListener :
    대체EventTarget.attachEventEventTarget.dispatchEvent 사용 가능.
    https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener
  • element.classList : https://developer.mozilla.org/ja/docs/Web/API/Element/classList
  • window.showModalDialog


    IE8에서는 창의 컨텐트가 캐시됩니다.
    http://axt.hatenablog.com/entry/2013/05/16/093814
    URL에 임의 값 등을 추가하여 캐시하지 않도록 합니다.

    <input type="file">


    IE 10 이하는 <input type="file">value 속성에 대해 빈 문자를 설정할 수 없습니다.
    선택한 파일을 지우려면 재제작<input> 요소 등에 공을 들여야 한다.
    http://so-zou.jp/web-app/tech/programming/javascript/dom/node/element/html/input/file/

    CSS


    IE8에서는 CSS 3 기능을 거의 사용할 수 없습니다.
    JavaScript 때와 마찬가지로 사용하기 쉬운 속성을 나열합니다.
  • :nth-of-type/nth-child
  • 호환 디스플레이


    IE8~IE11에는 이전 버전에서 호환 디스플레이를 표시할 수 있는 기능이 있습니다.
    https://msdn.microsoft.com/ja-jp/library/cc288325.aspx
    이 호환성 디스플레이는 이전 버전 모드로 표시되며, 레이아웃이 붕괴될 수 있습니다.
    다음 meta 탭에서 "항상 최신 버전으로 보이기"를 설정했습니다.
    <meta http-equiv="X-UA-Compatible" content="IE=edge" >
    
    기술할 위치를 주의하세요.공식 홈페이지에는 이렇게 적혀 있다.
    X-UA-compotible 머리글은 대소문자를 구분하지 않습니다.단, 이 눈썹은 제목 요소와 다른 메타 요소를 제외한 모든 요소 앞에 있어야 합니다.
    또 마이크로소프트의 블로그에는 다음과 같은 내용이 적혀 있다.
    https://blogs.msdn.microsoft.com/ie_jp/2011/10/03/head/
    IE 8 이후에는 페이지 작성자가 페이지를 표시하는 데 사용할 문서 모드를 지정할 수 있습니다.이렇게 하면 새 버전의 IE도 이전 버전의 모드에서 호환되는 페이지를 표시할 수 있습니다.문서 모드는 브라우저의 페이지 분석 방법에 영향을 미칩니다. META 요소를 찾으면 분석을 시작할 때 사용하는 첫 번째 X-UA-Compotible 값과 다른 값을 지정하면 Internet Explorer가 분석 프로세스를 다시 수행해야 합니다.다시 실행해야 할 경우 F12 개발자 도구에 다음 주의사항이 표시됩니다.
    따라서 X-UA-Compotible 값을 HTTP 응답 헤드로 지정하는 것이 좋습니다.
    기존에는 IE8에서'X-UA-Compotible'에 script 태그를 구성한 HTML을 열람했다가 IE 7 모드로 나타나 레이아웃 디자인이 망가졌다.
    <!DOCTYPE html>
    <html>
    <head>
    <script>/* JavaScriptの処理 */</script>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    </head>
    
    아래 사이트도 참고할 수 있습니다.
    http://d.hatena.ne.jp/oknknic/20110705/1309876591
    http://subtech.g.hatena.ne.jp/mayuki/20110423/1303554462

    좋은 웹페이지 즐겨찾기