'IE6'에 해당되는 글 3건

  1. 2010.10.27 ie7 이하부터 셋팅이 잘못될 경우 한글인식이 안된다? 2
  2. 2010.08.12 ie6 frame 잔상이 생기는 현상
  3. 2010.02.26 IE6에서 PNG파일을 사용하고 싶어요. 1

ie7 이하부터 셋팅이 잘못될 경우 한글인식이 안된다?

|
홈페이지용 웹진을 하나 만들었다.

플래시는 오픈 소스를 사용하고 html과 css 등등을 작성해주고 반복해서 사용할수 있게...

내가 사용중인 브라우저에서는 잘 표현되고 (ie7, 크롬, 오페라, 사파리 -_-) 다른 직원 컴퓨터의 브라우저 (ie6)에서도 잘되길래 완성하고 거래처에 건네주었다.

여태껏 쓰던 웹진은 구형이라 현재 쓰기에는 오류도 많이 발생하고 해서 거래처 담당자분은 좋아라하셨다.

그리고 그쪽 서버에 올렸는데... 2달 정도 지난 오늘 전화가 왔다.

특정 컴퓨터에서 웹진을 띄우면 하얀 화면만 나온다는 것이다.

물론 난 다 테스트를 해봤기에 그럴일을 없을거라 했지만 일단 원인파악을 하기로 했다.


모든 브라우저에서 테스트를 해봤는데 아무런 문제가 없다.

혹시 로컬때문에 내 데이터를 읽어가서 나만 보이나 싶어서 iis 중지시켜도 잘보인다.

이유가 머지???

설마 또 ie 자체 버그인가?


그래서 IE TESTER로 모든 버전으로 돌려봤다.

그랬더니 5,6,7 버전에서 하얀 화면만 뜬다.... 망할...

소스보기로 보니 

<html>
<head>qqljeqlrkjrqr(외계어)</head>
<body></body>
</html>

작성한 코드는 온데간데 없고 외계어만 자리잡고 있네.

한글 문제인가 싶어서 head안에 있는 한글 부분을 지우니 모든 화면이 정상적으로 보였다.


아니 한글 문제면 body안에 있는 한글은 왜 잘 표현되지?

이유는 간단했다.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
      <!-- 브라우저 타이틀 (주소바에 표시됨) -->
      <title>타이틀</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
...........

기존 소스는 위와 같다.

head안에 한글이 먼저 나오고 그 다음에 문자설정이 나와서 그런것이었다.

ie7 이하 버전은 지들이 알아서 안해주나 보다...


<head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <!-- 브라우저 타이틀 (주소바에 표시됨) -->
      <title>타이틀</title>

기존 소스를 위와 같이 교체를 했다. 잘된다. 행복하면서 짜증난다. -_-;
And

ie6 frame 잔상이 생기는 현상

|

홈페이지에 frame을 넣고 익스6에서 테스트를 해보니 잔상이 생기는 현상이 발생했다.

ie8이나 파폭에서는 잘되는걸 보니 6의 버그인거 같다.

그래서 검색을 해보니 배경을 확실하게 명시해주면 처리가 가능하단다.


01

@ 원인(cause)

1. 본인이 원한경우
- 홈페이지를 만들때 background music를 깐다던가.. 등등의 꼼수를 쓰려고..

2. 본인이 원하지 않은 경우
- 한글도메인을 사용하는 경우에 plug-in을 설치하지 않은 ie6에서는 임의로 frame를 삽입해 홈페이지를 출력한다.
이때, body에 background-image를 준경우에, 익스플로러에서 스크롤할때 잔상에 생기는 버그가 발생한다.


@ 해결방법(solution)
1. 배경이미지, 배경색등을 정확하게 명시하여준다.
ex>
body { background: #fff url('background.gif') top no-repeat; }
이경우..
body { background-color:#fff; background-image:url('background.gif'); background-position:top; background-repeat:no-repeat; }

2. 이렇게 해서도 안된다!! (solution 2)
* html { background-color: #fff; }

이런식으로 지정하면. 스크롤시 잔상이 사라지게 된다.


하여튼 ie6는 귀찮다.


http://atple.egloos.com/1680719

And

IE6에서 PNG파일을 사용하고 싶어요.

|

윈도우에 내장된 Internet Explorer는 너무 싫다.

버전마다 차이가 너무 심하고 (html...) 그나마 제일 나은 8버전은 너무 느리다...

팝업창을 띄울때나 새로 실행시킬때의 속도란... 그래서 난 오페라 브라우저가 기본브라우저다.

아아.. 이 내용을 적으려던것은 아니고...


홈페이지를 만들다 보면 바탕색이랑 틀린 이미지를 올려야 할 경우가 생긴다.

그 이미지의 배경을 보여줘도 괜찮다면 상관이 없지만 보여주면 안될 경우에는 투명한 PNG포맷을 이용해야한다.

모든 브라우저에서 저 포맷을 그냥 지원해서 배경이 투명하게 보여지지만... 우리의 IE6님께서는 그런걸 용납하시질 못한다.

그래서 다른 방법을 써야 하는데 그 중 하나가 포토샵 자체에서 해결하는 방법이다.

[그림1] IE6에서 투명하게 보여지는 PNG파일
[그림2] IE6에서 배경이 하얗게 보여지는 PNG파일


현재 브라우저가 IE7 이상이거나 파폭등 다른 기종이라면 위 2개 이미지 모두 배경이 투명하게 보일것이다.

배경 부분은 양모서리에 라운드처리된 부분이다.

위의 파일 2개는 같은 PNG파일이지만 차이가 있다.

그림1은 indexed color. 256개의 색상만 표현이 가능하다.

그림2는 일반 RGB 모드이다.

차이는 라운드된 부분의 층이 생긴 정도로 알수있다.

만드는 방법은 그림1은 위와 같은 모습을 작업후 저장하기 직전에 메뉴에서 Image - Mode - Indexed Color을 선택하고 저장을 해주면된다.

그림2는 일반 png저장 방법과 같다.


이 방법을 알았을때 편하게 배경이 투명한 파일을 만들수 있겠구나 싶었는데 위의 결과물을 보고 좌절할 수 밖에 없었다. 제기랄...

저렇게 층이 보여지는 이미지를 배경이랍시고 홈페이지에 올릴수는 없단 말이다...



방법2... (이미지 파일명은 png.png로 가정)

1) 배경이미지로 넣을때

.png { background:url(png.png) no-repeat left top; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=png.png',sizingMethod='crop'); }

div태그에 png클래스를 넣어주면 된다.

2) 그냥 이미지로 만들경우

.png img {_filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);}

<div class="png" style="_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='png.png');">

     <img src="png.png" alt="" />

</div>


이것만 알면 ie6에서도 png는 사용가능하겠지!!!



And
prev | 1 | next