X

만성투덜로그


제이쿼리로 IE7,8에서 nth-child사용하기

IE7과 8에서는 CSS3셀렉터인 nth-child가 지원되지 않아 사용할 수 없다. 이럴 때 제이퀴리를 이용


하여 아래와 같이 간단하게 nth-child를 사용할 수 있으며, odd는 홀수, even은 짝수행을 나타낸다.

 

부트스트랩 3.X버전에서 테이블의 table-striped사용시 IE7/8에도 적용하기 위하여 사용한다.


<script type="text/javascript">

  jQuery(function($){

    $('tbody>tr:nth-child(odd)').css('background','#f9f9f9');

  });

</script>

Posted by 만성투덜

2014/02/11 14:42 2014/02/11 14:42
, , , , ,
Response
받은 트랙백이 없고 , 댓글이 없습니다.
RSS :
http://www.nfriend.net/nf_tc/rss/response/75

부트스트랩 3.X 사용(테스트환경 3.0.0)시 IE7에서 그리드 시스템의 경우 렌더링 오류가 나타난다.

IE8이상과 다른 종류의 브라우저에서는 정상적으로 표현이 되나 부트스트랩 3점대 이상에서만

이 현상이 나타나는데, 이는 부트스트랩 3점대 이상버전에서 IE7을 지원하지 않기 때문에

나타나는 현상이다. 이 경우에 사용하기 위한 플러그인이 개발되어 오픈소스로 공유되어

있는데, 다운로드 URL 및 사용법은 아래와 같다.

1. 다운로드 URL 및 사용법

2. BootStrap 3 for IE7을 사용하기 위한 추가 플러그인(BootStrap 3 for IE7을 사용해도 정상적으로
    레이아웃이 표현되지 않을 때 사용)
box-sizing-polyfill

3. 두 가지 플러그인의 실제 사용 예
 3.1 bootstrap-ie7.css파일을 다운로드 받아 서버의 특정한 위치에 업로드
 3.2 부트스트랩 사용페이지 HTML헤더에 아래와 같은 코드삽입

<!--[if lt IE 8]>
  <link href="/boot/css/bootstrap-ie7.css" rel="stylesheet">
<![endif]-->
3.3 boxsizing.htc 파일을 다운로드 받아 서버의 특정한 위치에 업로드
3.4 bootstrap-ie7.css파일 첫번째 라인의 마지막부분에 behavior:url 를 본인의 시스템에 맞게
     수정
content{box-sizing:border-box;behavior:url(/boot/js/boxsizing.htc)
3.5 서버의 DOCUMENT ROOT .htaccess파일에 아래와 같은 내용 추가
AddType text/x-component .htc

위와 같이 부트스트랩 3.X를 사용할 경우 IE7버전에 대한 렌더링 오류 처리를 할 수 있으며,

추가적으로 세세한 부분에 대해서는 각 사이트에 맞게 조정하여야 할 것으로 생각된다.

부트스트랩 플러그인 관련 정보는 아래의 사이트를 참조하였다.


Posted by 만성투덜

2014/02/10 16:43 2014/02/10 16:43

IE6~8에서 특정 HTML5 태그의 렌더링 문제가 발생한다. 이 렌더링 문제를 수정하기 위해

html5shiv를 이용한다. 또한 미디어쿼리도 정상적으로 지원하지 않는데 이 때문에 부트스트랩

사용시 네비게이션바(navbar)의 collapse가 정상적으로 표현되지 않는 문제가 발생한다. 

이 문제를 해결하기 위해서는 respond.js를 이용한다.

아래는 html5shiv, respond.js 사용 예와 관련 페이지다.


1. html5shiv, respond.js 사용 예
<!DOCTYPE html>
<html lang="ko">
<head>
  <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.js"></script>
  <![endif]-->
</head>


2 .html5shiv 구글 다운로드 & 정보 페이지
https://code.google.com/p/html5shiv/


3. html5shiv 사용법 & 다운로드 & 개발관련 정보 페이지
https://github.com/aFarkas/html5shiv

4. respond.js사용법 & 다운로드 & 개발관련 정보 페이지
https://github.com/scottjehl/Respond

Posted by 만성투덜

2014/02/06 20:27 2014/02/06 20:27


블로그 이미지

- 만성투덜

Notices

Archives

Recent Trackbacks

Calendar

«   2017/06   »
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30  

Site Stats

Total hits:
2072077
Today:
3617
Yesterday:
7255