[임시패치] FastBoot IE8 동작 개선

Posted by Readiz
2014.03.10 23:10 반응형 티스토리/FastBoot

FastBoot v1.3.5에서 수정되었습니다. 다운로드 링크는 아래 글 하단부를 참조하세요.



  어디까지나 임시이지만 IE8에서 제대로 동작하지 않는다는 분들이 많아서 급하게 패치합니다. 다음 버전에서는 이상없이 아래 기능 추가될 것입니다.


  두가지 파일이 추가되며 (images폴더 안입니다) 마크쿼리 스킨 개발자님께 감사의 말씀 드립니다. ie.css는 그대로 가져다가 썼는데 이상없이 동작해서 minimize만 하였고, 다만 ie.css가 상단 navbar가 모바일처럼 접혀나오는 문제가 있어서 이를 수정한 ie.navbar.css를 급조하였습니다. 이 부분은 제가 bootstrap에서 필요한 부분만 IE8에서 다시 overriding하여 만든 것입니다. 파일 두개부터 받고 시작합니다.





images 폴더에 업로드 하였으면, 상단 헤더를 아래처럼 바꿔줍니다.


	
<!-- FastBoot v1.3 by Readiz
	 Responsive Tistory Skin
	 http://readiz.com/
	 Open sources are copyright of their respective owners.
-->
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<link rel="shortcut icon" href="[$$_blog_link_$$]favicon.ico" />
<link rel="alternate" type="application/rss+xml" title="[$$_title_$$]" href="[$$_rss_url_$$]" />
<!--F Open Sources are using here: Bootstrap, Bootflat, Fontawesome -->
<link href="./images/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" media="screen" type="text/css" href="./style.css" />
<link href="./images/fastboot.min.css" rel="stylesheet" />
<title>[$$_page_title_$$] :: [$$_title_$$]</title>
<!--F ie.css by Ungki, H. ie.navbar.css by Readiz  -->
<!--[if lt IE 9]>
<link href="./images/ie.min.css" rel="stylesheet" />
<link href="./images/ie.navbar.css" rel="stylesheet" />
<![endif]-->
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" />
</head> 
	

$$는 ##로 치환해주시기 바랍니다.


  여기까지 완료되면 IE8에서도 문제없이 페이지가 로드됩니다. respond.js가 우여곡절 끝에 티스토리에 적용되어 좋아했었는데, 속도가 느리다는 치명적인 문제와 종종 IE가 뻗는 문제가 있었습니다. 위 방법대로 적용하시면 이제 IE8에서도 잘 작동합니다.

  그리고 조만간 Font-awesome을 구버전으로 바꿔서 FastBoot을 IE7까지도 지원하게 만들 예정입니다. 기대해주세요.


  아래는 IE8에서 어떻게 나오는지 보여드리고자 찍은 스크린샷입니다.







저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. 감사합니다. 가슴이 시원하게 뻥 뚫린 기분이네요... 화장실 가서 볼일보고 나왔는데 뭔가 찝찝한 느낌이었는데... 완전 말끔 해 졌습니다. ㅎㅎ 그리고 폰트어썸을 이전버전으로 변경하게 되면.... 클래스명이 완전 틀려서,,,, 지금 스킨에 상당한 양의 폰트어썸 아이콘이 사용되고 있는데 엄청난 작업이 될것 같네요 ㅎㅎ 고생이 많으 십니다.. 위에 ie.css 파일로 대체하게 되면, 기존에 있던 긴 주석내용은 삭제가 되도 되는거죠?

    알려주신대로, 우선은 주석으로 처리된 부분들을 위의 코드로 대체 했고,,, 전 헤더 부분에 많은 태그들을 추가 해줘서,,, 폰트어썸 CDN 코드만 아래로 내려서 작업을 했네요 ㅎㅎ
    • 네 이제 느린 respond.js는 버려야겠습니다.

      Fontawesome이 4.0버전부터는 IE8이상만 지원하더군요.
      IE7이 얼마 되지 않는 브라우저이지만, 이것을 Fontawesome 3.0버전에서 지원을 하니 이것만 이제 제대로 된다면 IE7부터 전부 다 적용되는 반응형 스킨이 탄생하게 되는 거네요.. 이번 주말까지 다시 달려야겠습니다.

      아 그리고 onasaju님 블로그 모양이 이쁜거 같아서 포스팅사진에 추가했어요. ㅋㅋㅋ 괜찮으시죠? 본문보세요 ㅎㅎ IE8에서 잘 뜹니다.
    • 와우 .. 스크린샷을 추가도 해 주시고 넘 감사합니다. ㅎㅎ 스켈레톤 스킨을 서브 블로그에 테스트용으로만 잠깐 적용 해보고는.... 반응형 스킨이 FastBoot가 처음인데... 리드이즈님 덕분에 부트스트랩에 대한 이해도 많이 하게 되서 넘 감사하게 생각하고 있습니다.

      제 블로그 상단 메뉴바...핑크색이 왠지... 헬로키티 좋아하는 여성 유저 같아 보이네요 ... ㅎㅎ 저건 수정작업이 모두 완료가 될때까지만 임시로 해 놓은 거라서... 이번 주 내로.. 커스터마이징 수정작업을 마무리 해야 겠습니다. 물론 관련 포스팅도 마무리 해야죠 !

      상단 메뉴바의 넓이 변경하는 사항, ie 8에서 먹통되는 사항, 본문과 사이드바 영역 크기 변경 사항... 등등 넘 감사합니다.. ^^

      계속 사용하면서, 커스터마이징 하면서.... 트랙백 넣겠습니다 ^^
  2. 그런데.. IE 8 에서 보더-라디우스(경계선 라운딩 효과)가 안보이는데도... 깔끔하고 괜찮아 보이네요 ㅎㅎ 보더 라디우스 사용을 남발하고 있었는데... 구버전 익스플로러 사용자를 위해서.... 굴곡을 조금만 주도록 해야겠네요 앞으로는 ㅎㅎ
    • 저도 처음에는 보고 식겁했는데 보다보니까.. 어라 괜찮네? 이런 느낌이 오더라구요 ㅋㅋ.. 어차피 현재 flat하게 해둔 상태라 둥글든 각이지든 어울리는 것 같습니다.
  3. IETester 로 확인하니, IE8에서는 잘 보이는데 IE7에서는 아예 안보이네요 ㅎㅎ 그래도 IE8 까지는 잘 해결된거 같아서 기분이 좋네요 ^^ IE7에서는... 에스토크님이 제안한 방법으로.... 페이지를 새로 짜서 7로 접속하는 사람은 해당 페이지가 보이도록 해야겠네요... ㅎㅎ
    • IE7에서 안보이는건 IE Tester문제일수 있습니다. 그 프로그램 자체가 문제가 많은지라.. 정확한건 VM깔아봐야해요.
  4. 정말 웹사이트 만드는데 드는 시간이 100이며 그중에 70은 IE 호환에 쓴다고 해도 과언이 아닌것 같습니다. ㅋㅋ

    저도 별의별 노가다를 다 해보았는데 그냥 깔끔하게 포기하는게 낫더군요

    정말 IE에서는 내용만 보일수 있도록 해주는 것이 좋습니다. 제가 사용하는 오만가지 플러그인도 IE8 이하는 더 이상 지원을 하지 않더군요.

    가장 중요한 댓글 플러그인인 디스커스가 IE7 이하에서 로드가 되지 않다보니 IE5,6,7 접속자분들이 IE 전용 스킨 너무 예쁘다고 칭찬도 안해 줘서 슬픕니다 ㅠㅠ ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

    p.s textarea에 css3 애니메이션이 들어간것 같은데 크기 조절시에 상당히 굼뜨네요;
    • IE는 아이씨의 약자인듯 합니다.
      Textarea는 확인해보겠습니다. 제보 감사합니다.
  5. 우와 정말 빠르시네요^^ 역시 능력자이신듯~~ 감사합니다..ie7까지 호환되면 이제 완벽~~
  6. 위 내용 적용하니,
    이제 IE8에서 죽지않습니다..

    감사합니다..
  7. 저는 스킨을 깡스킨으로 만들어서 7 버전이하 부터는 해당 스킨으로 접속되게끔 유도한다거나 브라우저 강제 버전업 업뎃 시키는 방법 찾아서 시도 해 볼까 합니다. 구글 웹로그분석으로 대충 계산 해보니까 ie7,6 이용자가 350명 가량 되더라고요. 일일평균 ....에스토크님이 사용하는 방법 문의 결과 hack 과 conditional 이라는 태그로 해결 가능하다고 하던데... 추후에 천천히 찾아봐야겟어요 ㅎㅎ 오늘도 힘찬 하루 보내세요 ^^
    • 유효한방법은 많지 않은듯해요. onasaju님도 좋은하루 되시길..
  8. 정말 좋은 정보 감사합니다..ㅠ
    혹시 제 블로그 오셔서 뭐가 문제인지 봐주실수 있으신가요..ㅜ
    몇시간째 헤매고 있네요..
    IE8인데 접혀서 이상하게 뜨는 문제가 계속 발생합니다..ㅜ
    http://timefly88.tistory.com
    • 스켈레톤 레이아웃은 잘 모르겠네요.. ㅎㅎ
    • 2014.09.20 19:08
    비밀댓글입니다

티스토리 툴바