IE6에 PNG를 맞추다보면? > 자유게시판

자유게시판

IE6에 PNG를 맞추다보면? 정보

IE6에 PNG를 맞추다보면?

본문

제가 요 몇일 홈페이지 비쥬얼을 PNG로 좀 유리느낌이 나게 제작중인데
PNG파일을 많이 배경으로 쓰다보니 IE6에서의 문제가 대두되서 그냥 일반적인 방법으로
IE6에서 PNG 출력을 시키기는 하는데 기술이 부족한건지 IE6때문에 이미지를
테이블이나 DIV에 크기를 맞춰서 출력시켜줘야 하는 문제가 생기더라구요?

그냥 일반적으로 웹상에 많이 있는 "iepngfix.htc"요놈하나 다운받아

  img  {
   behavior   : url(iepngfix.htc);
  }

  *.sample  {
   behavior   : url(iepngfix.htc);
   background   : url(sample.png);
   width    : 128px;
   height    : 128px;
   text-align   : center;
  }

이런 식으로 스타일주고 class="sample" 이렇게 불러 주는데 IE6에서 테이블, 또는 DIV의
크기에 따른 배경출력이 문제 더라구요.  그냥 테이블, 또는 DIV의 크기로 늘어 나버리는
겁니다?

가령, 세로 900인 테이블에 세로 400PX인 사이즈의 배경을 가로반복을 시켰을 때, 이놈이
900PX만큼 IE6에서 늘어나서 400PX이어도 좋을 이미지를 일부러 900픽셀로 만들어
넣어주고 마감을 치고 있습니다.  뭐 400픽셀 이하로는 색상값들이 없는 투명이라 용량이
2배, 3배로 많아 지는 것은 아니지만 아무래도 좀 개운하지가 않습니다.

보통들 어떤 방법으로 저와 같은 고민을 해결하시는지요?

이거 월요일 넘겨야 하는데 넘겨주고 나면 떵싸고 밑을 딲지 않을 것 처럼 기분이 그럴것 같습니다!

추천
0

댓글 12개

*.MnBoxHR  {
                    behavior:url(iepngfix.htc);
                    background:url(img/MnBoxHR.png);
                  }

*.MnBoxWB  {
                    behavior:url(iepngfix.htc);
                    background:url(img/MnBoxWB.png);
                    }

이렇게 따로 부르고 있는데 "iepngfix"이놈이 좀 엉뚱한게 받아진건지 판단이 않서네요.

기냥 귀찮아도 png배경들 합쳐서 재코딩 해야 겠다는 생각을 하고 있습니다.
감사합니다!
iepngfix에서 반복 이미지의 문제로 알려진 내용인듯 합니다.
또한 전체적으로 img 셀렉터에 iepngfix를 적용하면 사이트가 무거워지는 단점도 있는걸로 압니다.
적용범위가 많지 않다면 iepngfix.htc를 빼고 핵을 쓸수도 있습니다.

gif 파일을 신경써서 만들어야 하는 삽질이 문제이긴 합니다만...
이런식으로 별도 gif 이미지를 만들고 ie를 위한 '언더스코어핵' 을 쓰기도 합니다.
background: url('sample.png') no-repeat transparent; _background: url('sample.gif') no-repeat transparent;

다른 방법으로 이런식으로도 하기도 합니다.
background:url('sample.png'); _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample.png', sizingMethod='crop');

참고로 xe/common/js에 iepngfix.htc와 js의 연동 부분을 파보시면 도움이 되실듯 합니다.
시간도 없고 해서 지금 gif나 분리되어져 따로 불러 졌던 png배경을 하나로 합치고 있습니다.  일단 납품은 해 놓고 시간날때 다시 한번 봐야겠더라구요.

제가 머리가 나쁜건지 생각보다 이 문제가 쉽지가 않더라구요.

내용없는 홈페이지라 일단 디자인 이라도 이쁘고 봐야해서 신경을 너무
무리하게 썻나봐요!

좋은 밤 되세요!
반복이 아닌 블럭의 배경이라면 이것으로 됩니다.
의도하신대로 같은 png 파일을 쓰는것이니까요.
.sample { background:url('sample.png') no-repeat; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sample.png', sizingMethod='crop'); }
전체적으로 레이아웃 이미지를 png로 쓴다면 드렁크수달스님 말씀처럼 CSS를 분리해서 처리하고 부분적으로 쓴다면 클래스에 선언하는 정도면 될것 같네요.
플록님이 말씀하신거 정리된 글입니다. IE6 를 안쓰는게 속 편하죠 ㅎㅎ;;

http://www.eyegirl.co.kr/bbs/board.php?bo_table=web_tip&wr_id=19&sca=&sfl=wr_subject%7C%7Cwr_content&stx=png&sop=and
ie6에서 배경 png 사람 미치게 맹글죠 ^^;
레이아웃 짤때 배경 반복과 포지셔닝은 피하고 스크립보다는 ie전용 필터를 써서 처리하시는게 좋을 듯 싶습니다.
어디서 많이 본 멍인데요? ㅋㅋㅋㅋㅋㅋㅋ
반가워요~!

결론이 나긴 했는데...기냥 당분간은 png로 복잡스런 디자인 구현을 않하는 것이 좋을 듯 합니다.ㅎㅎㅎㅎㅎ

ie6<====== 얘를 어떻하든 빨리 끌어 내려야 겠다는 생각뿐이네요!!!

좋은 주말 되세요!
전체 199,647 |RSS
자유게시판 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT