IE 일반 CSS의 BUG(둘)

이전에 IE 브라우저의 몇 가지 BUG 해결 방법을 소개했는데, 오늘 우리는 IE의 BUG를 계속 연구한다.IE6가 곧 탈락할 것이지만 이런 것들을 이해하는 것도 장래의 문제 해결에 어느 정도 도움이 될 것이다.자, 잡담은 그만하고 IE의 BUG를 계속 봅시다.
 
1. IE6에서 PNG 이미지 투명 Bug
Png이 IE6에 문제가 있음을 모두가 알고 있습니다.때로는 IE6에서 png 그림으로 JQ를 사용해도 문제가 생겨서 해결 방법은gif로 바꿀 수밖에 없다.또 하나의 문제는 png24나 png32 그림을 사용하면 품질에 문제가 없고 또 다른 두통을 일으킬 수 있다는 것이다. 바로 IE6 아래에 그림이 옅은 난초색의 배경이 있다는 것이다.
해결 방법:
1) 필터로 해결하지만 문제는 필터를 사용하면 링크가 무효화된다는 것입니다.
CSS 코드:
 

.img{

	background:url('http://justflyhigh.com/img/front/ico_notice.png');

	_background:none;

	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://justflyhigh.com/img/front/ico_notice.png',sizingMethod='scale');

}

 
 
또는
HTML 코드:
 

<img src="http://justflyhigh.com/img/front/ico_notice.png" width="247" height="216" style="filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://justflyhigh.com/img/front/ico_notice.png', sizingMethod='scale');" alt="    " />

 
 
2)DD_belatedPNG.js
DD 사용 가능belatedPNG가 구현되는 실제 구현 방법
2. margin의 마이너스 값 수정
마이너스 간격은 우리가 평상시 웹 제작에서 일정한 효과를 얻기 위해 자주 사용되지만 현대 브라우저에서 마이너스 간격을 사용하는 것은 문제가 되지 않는다. 그러나IE6에서 마이너스margin값을 사용하는 것은 우호적이지 않다. 목표 요소에'position:relative'속성을 사용하지 않는 한:

div {

	margin: -20px;

}

* html div {

	position: relative;

	zoom: 1;

}

 
3. overflow가 IE6에서 부동 문제를 해결한다.
 

div {

    overflow: hidden;

    _zoom: 1;

}

 
 
4. IE6의 고정 위치
사이트에 어느 위치에 고정해야 하는 수요가 있는데 이럴 때 모두가 선택한 것은 고정적인 포지셔닝이지만 IE6에서는 지원하지 않는다.그럼 어떡하지?아래를 보세요.
해결 방법:
1) 절대 포지셔닝 시뮬레이션으로 고정 포지셔닝
CSS 코드:
 

html{height:100%;overflow:hidden; position:relative;}

body{margin:0;height:100%;overflow:auto;}

.page{height:2000px;}

.box{width:200px;height:100px;background:Red; position:absolute;left:100px;top:100px;}

HTML 코드:
 
 

html{height:100%;overflow:hidden; position:relative;}

body{margin:0;height:100%;overflow:auto;}

.page{height:2000px;}

.box{width:200px;height:100px;background:Red; position:absolute;left:100px;top:100px;}

 
 
5, IE6 아래 문자 넘침
두 부동 요소 사이에 주석 문이 있으면 IE6 아래에 오버플로우 문자가 나타납니다.
CSS 코드:
 

.box{width:400px;}

.left{float:left;}

.right{float:right;width:400px;}

HTML 코드:
 
 

<div class="box">

	<div class="left"></div><!--IE6     bug-->

	<div class="right">↓         </div>

</div>

<!--

	            

-->

해결 방법:
 
1) 주석 문자를 다른 곳에 추가하면 된다
2) 부동원소 부급원소에 고정고도와 오버플로우:hidden을 추가한다.