media print html5 요소가 안될 때.

html5를 지원하지 않는 ie8 이하 버전에서는, 스크립트를 통해 화면을 구현하게 된다.

하지만, 스크립트로  ie8이하 버전에서 html5를 구현할 때 생기는 문제 중 하나가 인쇄버전에서는 이를 읽어들이지 못한다는 것이다. 때문에, 아래와 같이 화면을 인쇄했을 경우 화면이 깨진 채 출력되는 문제가 발생한다.

이 화면이 아래와 같이 인쇄된다.

이런 현상을 막기 위해서는 아래와 같은 스크립트를 추가해 조치할 수 있다.

첨부 파일(js): ie.print.rar

<!--[if lt IE 9]>

<script src="/js/ie.print.js"></script>

<![endif]-->

미디어쿼리로 css 파일에 다음과 같은 것을 추가해 주는 것도 도움이 된다.

@media only print { 

  #header,

  #snb,

  #footer,

  .sns-area {position:absolute; top:-1000em; display:none !important }

  section#content {position:absolute; width:100%; padding:0; margin:0; color:#000 !important}

    img { max-width: 100% !important; }

    div, artice, h1, h2, h3,p, span, li, dt, dd, em {color:#000 !important}     

}

위 css는 불필요한 컬러 요소들과 좌측/상단 메뉴들을 없앤 것이다.

사실, 애초에 각 링크를 따라 링크 주소까지 다 출력되도록 조치해 놨지만, 클라이언트들이 싫어해서 그건 패스~(사실, 인쇄했을 때 링크 요소의 주소를 출력해 주는 것은 지저분해 보이긴 하지만, 사용자들에게는 꽤나 유용한 경우가 많다. 종이로 출력된 것만 가지고도 각 문서를 찾아 들어갈 수 있으니 말이다.)

[출처] http://burchurl.egloos.com/2352123