Line-height of select and IMG in IE6 is invalid.

Original English document

Introduction

IE/win continues to amaze us. This demo will describe a bug where
Line-height is incorrectly rendered if the line contains a replaced element.
Very simply, if the default line-height is changed to a larger value, the line
Spacing abve and below any text line that contains a replaced element, such
A small emoticon, will be half of the spacing seen elsewhere in the text.

Note that IE7 does not show this bug

.

Affected browsers

• Microsoft Internet Explorer 5.01/Windows
• Microsoft Internet Explorer 5.5/Windows
• Microsoft Internet Explorer 6

Description

The graphic shows Internet Explorer 6's inconsistent rendering of
Line-height. The line-height is made exceptionally large to exaggerate
Effect of the Bug, so that the problem is obvious.

The HTML needed to trigger this bug is nothing more than plain text, with
NormalInline replaced Element

, Such as an image, within that
Text. The 100px line-height value is applied to the body element, where
Separate the text lines by almost 100px.

body { line-height:
100px; }

View a live demo

.

Strangely enough, this bug is triggered just by the simple presence of any
Replaced element:IMG

,
INPUT

,TEXTAREA

,SELECT

AndOBJECT

.

3.1 Definitions: replaced Element

"An element for which the CSS formatter knows only the intrinsic dimensions.
In HTML, IMG, input, textarea, select, and object elements can be examples
Replaced elements. For example, the content of the IMG element is often replaced
By the image that the "src" Attribute designates. CSS does not define how
Intrinsic dimensions are found ."

Http://www.w3.org/TR/REC-CSS2/conform.html#replaced-element

Detailed description

Further investigation shows that IE6 apparently thinks it has a very good
Reason for this behaviour. It might seem random at first, but it is not.

As specified byW3C CSS-2.1 (Recommendations)

, The difference
Between the line-height and font-size is called leading-half of it is called
Half-leading. A user agent shoshould add half-leading on the top and bottom.

For example, a if a font-size of 12 pixels is defined with a line-height
20 pixels, then 8 pixels (Leading) of space shocould be added-4 pixels
(Half-leading) on the top and bottom.

When IE6 encounters a line containing a replaced element, it
Collapses

The half-leading of that line with the half-leading
Of the preceding and following line.

Is there a fix?

Currently there does not seem to be a proper fix for this IE6 bug. The bug
Itself is awkward and very straight-forward, to say the least.

Once the element is taken out of flow, either by positioning it absolutely or
By floating it, the bug does not occur. Considering none of us really has
Idea how IE calculates the line height and the fact that the situation can't get
Any more basic, it seems as if the bug cannot be fixed at the source. However,
In certain situations you can get it right.

Hacking away

By carefully applying a top and bottom margin to the replaced element one can
Force the line-height to be about the same as intended. Unfortunately, this
Solution isn't very universal and relies on a couple of simple requirements:

• The height of the replaced element needs to be known at all times.
• The height of all the replaced elements of the same type needs to be almost
  Equal if you want to make use of the same CSS classes.

By applying the following CSS on our demo page we get this newDemo

, Which puts everything back
Place.

/* Holly Hack: Hide
From IE5/Mac /*/ * html img { margin: 45px 0; vertical-align: middle; } * html
input { margin: 39px 0; vertical-align: middle; } /* Holly Hack: End Hide From
IE5/Mac */

The top and bottom margin simulate the needed half-leading for IE/win. Their
Values are calculated by subtracting the element's height from the line-height
And dividing it by two.vertical-align

Property is needed to position it
Correctly.

Finally, we use the hiding hack from the holly hack to prevent IE/MAC from
Applying it as well.

Notice:

As of 2008, newer methods are nowAvailable

To achieve the same results.

Several Notes

Use of such a ridiculously large line-height can be rare. However, this bug
Is still noticeable-albeit less-when using a more common font-size, line-height
And small inline, replaced elements (emoticons, for example ).

Throughout the demo pixels are used to define font-size and line-height and
Measure the distances for the sake of simplicity. It does not matter what type
Of unit is used to define the line-height. Nor does it matter if a font-size is
Defined.

Conclusion

Another bug and a strange one at that. Thankfully, the bug doesn' t affect
Layout in a terrible way-it's just annoying if you are a perfectionist. I wowould
Have loved to conclude this demo with a real fix. Perhaps some day-until then it
Remains an issue.

 

Original English document

The line-height attribute in IE6 is invalid. Previously, padding was used to solve this problem. I encountered another problem today. I searched for it and found the above article, the line-height attribute in IE6 is invalid because the text contains IMG, input, select, textarea, button, object, and other tags.

Solution:

CSS styles are applied to IMG, input, textarea, select, object, and other elements connected to the text:

Margin:
(Line-height)/2px 0;

Vertical-align: middle;

However, as far as I try, margin: (line-height)/2px 0; this setting method has deviations, which are more accurate
(Line-height-Self-height)/2 is smaller. For details, test it by yourself ~.