IE6 margin 버그 해결책

일단 해결책 부터 쉽게 말하자면 버그 나는 부분에 display: inline; 요한줄만 써주면된다..
문제의 발단은 float 를 IE가 제대로 뿌려주지 못하기 때문인거 같다.. 자세한 내용은 아래 영문 참조..
그냥 링크를 달려고 했으나.. 내가 자주 볼꺼 같아서 긁어왔다.. ㅋㅋㅋ

IE6 버그에 대한 주요 타이틀

The IE Doubled Float-Margin Bug

What Goes Wrong

A coder innocently places a left float into a container box, and uses a left margin on the float to push it away from the left side of the container. Seems pretty simple, right? Well it is until it’s viewed in Explorer for Windows. In that browser the left float margin has mysteriously been doubled in length!

The Way It Oughta Be

The graphic below shows a simple div (tan box) containing a left-floated div (green box) . The float has a left margin of “100px”, producing a 100px gap between the left edge of the container box and the left edge of the float box. So far so good.

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px <span><font color="#dd0000">100px</font></span>; 
  /*This last value applies the 100px left margin */
  }

The Old IE “Doubletake”

That exact same code when viewed in IE/Win is displayed in a slightly different way. The graphic below shows what IE/Win does to the arrangement.

Why is this happening? Don’t ask such silly questions! This is IE, remember? Conformance with the specs is only to be hoped for, not expected. The simple fact is it does happen.

Important Points

This bug only occurs when the float margin goes in the same direction as the float and is trapped directly between the float and the inside edge of the container box. Any following floats with a similar margin won’t show the doubled margin. Only the first float in any given float row will suffer from the bug. Also, the doubled margin displays symmetry, working the same way to the right as it does to the left.

At Last, A Fix!

Up ’til now (Jan ’04) this bug was thought to be unfixable, and was generally controlled by replacing the faulty margin with a left padding on a non-visible float, along with a nested inner box to serve as the visible box within the invisible float, or by hacking a one-half margin value for IE/win only. It works, but is clunky and messes up the clean source code. Well that’s all over now.

Steve Clason has discovered a fix, outlined in his Guest Demo, that fixes both this doubled margin bug and a weird text indent bug as well. It’s a classic type of IE bug fix, using one property to cure a bug that affects an unrelated property.

So What Is It Already?

Dig this. Simply placing {display: inline;} on the float is all that is needed! Yup. Sounds too easy, don’t it? Nevertheless it’s true that a mere display declaration of “inline” is enough to do the job.

Those who are familiar with the specs on floats are aware that floats automatically become “block” elements, no matter what they were before becoming floats. As Steve points out from the W3C:

9.5.1 Positioning the float: the ‘float’ property

“This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings:

left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the ‘clear’ property). The ‘display’ is ignored, unless it has the value ‘none’.

right
Same as ‘left’, but content flows on the left side of the box, starting at the top.

none
The box is not floated. ”

That means that {display: inline;} on a float should be ignored, and indeed all browsers show no changes in the float when this is done, including IE. But, this does somehow trigger IE to stop doubling the float’s margin. Thus, this fix can be applied straight, without any fussy hiding methods. If a future browser decides to hiccup upon seeing this fix, just enclose the fix in an “IE only” Tan hack as detailed in the IE Three Pixel Text-Jog Demo.

Below are two live demos using the same code as previously, first displaying the IE bug as usual, and next the same demo with the “inline” fix applied to the float.

Float
Float,
with
{display: inline;}

.floatbox {
  float: left;
  width: 150px;
  height: 150px;
  margin: 5px 0 5px 100px; 
  <span><font color="#dd0000">display: inline;</font></span>
  }

Serendipity

You may notice that this bug fix idea is duplicated at the bottom of Steve’s demo page. Y’see, at the beginning of this episode Steve noticed the IE text indent bug and found the “inline” fix for it. He brought it to my (Big John’s) attention and since this was a cool bug with a fix, I then asked Steve to write it up as a “Guest Demo” for PIE. During the course of preparing the demo, Steve discovered that the fix also works to cure the Doubled Margin Bug, a much more common problem. Steve is a busy guy, and he asked me to write this “in depth” demo page to cover the fix while explaining the bug itself more completely.

I started the Guest Demo “program” primarily for encouraging others to focus their attentions on the various CSS display difficulties (and to avoid so much hard work for myself).

Well! Ah reckon it’s working accordin’ to plan. Way to go, Steve! 🙂

Holly ‘n John   Contact Holly Contact John ©positioniseverything
Last updated: January 19, 2004
Created January 19, 2004

불꽃남자

UI 개발자

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

This site uses Akismet to reduce spam. Learn how your comment data is processed.