Shulou(Shulou.com)06/02 Report--

This article mainly explains "Bug analysis of highly extended bugs in IE CSS Bug series". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let Xiaobian take you to learn "Bug analysis of highly extended bugs in IE CSS Bug series"!

affected version

This bug affects IE6.

performance

Element is longer than specified height (mainly for small heights)

Tutorial Release Time

Friday, July 17, 2009 09:58:19

problem description

Although these bugs don't appear semantically on the page, sooner or later even the most experienced developers may encounter this bug, which causes the IE box model to generate a very small height value on the element when parsing.

The bug becomes obvious when you add some text to the element. The following example will make it easier for you to understand

HTML Code：

Lorem

CSS Code：

div { height: 3px; background: #dd0; } #text { margin: 10px 0; } /* irrelevant to the bug */

First of all, I want to remind you that the background and margin attributes have nothing to do with this bug. I wrote them just to make it easier for you to tie your code rendering style more closely to the demo style.

This demo presents two lines 3 pixels high, which are really just div tags. One of them contains the word "Lorem," which spills over into the second div in any smart browser (IE 7 and below), so in IE 7 the div remains 3 pixels tall.

When you look at the demo above in versions below IE7, there are some unexpected bad problems, and both of our div are a little higher than 3 pixels. What the hell happened? Let's take a look at the div containing the word "Lorem." You should notice that the div expands a little to accommodate the word, and you'll notice that the div without any text also expands by the same height.

This bug makes more sense now, even in empty elements IE has at least one space. By breaking the space created by the box model, our div expands rather than allowing this space to overflow outside the div. Let's assume that space is controlled by the font attribute. Now, smart as you are, try to do something about it when you hear overflow and font.

solutions

Here are the workarounds for the bugs listed above (sorted by type)

"Clear" solution-has side effects

Proposal submission time

July 17, 2009 10:05:25

Rev

All affected versions

protocol describes

This fix method is very simple and clear, we will use overflow attribute to fix IE overflow problem, here is the demo after we fix

HTML Code：

Lorem

CSS Code：

div { height: 3px; background: #dd0; overflow: hidden; } #text { margin: 10px 0; } /* irrelevant to the bug */

We added an overflow: hidden style to div to solve the highly scalable bug. In fact, where the overflow attribute is added, the spatial location that was previously in those over-smart browsers (IE6-) is now hidden.

Side effects of the "clean up" solution

A side effect of this solution is that all overflow elements will be hidden, and maybe some of the elements you want will be hidden as well.

"Clear" solution-there are side effects

Proposal submission time

Friday, July 17, 2009 10:11:15

Rev

all affected

protocol describes

In this solution, we will assign 0 to the font-size property. Personally, I would recommend using another "clear" solution, as some users may disable font specific features on the page (see Tool-> Internet Options-> General-> Accessibility-> Ignore font sizes in the browser menu bar). Here is the demo after we fix it.

HTML Code:

Lorem

CSS Code：

div { height: 3px; background: #dd0; font-size: 0; } #text { margin: 10px 0; } /* irrelevant to the bug */

Needless to say, if you understand the cause of this bug, everything will be solved. Set font-size to 0. We think we can make this space and text small enough that there will be no overflow.

Again, I recommend using overflow: hidden as another solution, because users will probably disable font resizing in their browsers and everything you do for compatibility will fall apart.

Eliminate the side effects of the solution

A side effect of this solution is that all overflow elements will be hidden, and maybe some of the elements you want will be hidden as well.

At this point, I believe that everyone has a deeper understanding of "Bug analysis of highly extended bugs in IE CSS Bug series," so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.