10 common ie bugs and Solutions

1. IE6 ghost text (ghost text bug)

Before I write this article, I encountered this bug. It is quite weird and funny. IE6 displays a piece of duplicate text close to the original text. See Explorer 6 duplicate characters bug for a bug demonstration ). I couldn't solve it, so I searched for it. It was another IE6 bug.

There are many solutions to this, but none of them works for my examples (I cannot use some of them because of the complexity of the website ). So I used hack. Adding spaces after the original text seems to solve this problem.

However, I learned from the hippy tech blog that the cause of the problem is the HTML comment tag. IE6 cannot render it correctly. The following is a list of recommended solutions:

Solution:

1. Use <! -[If! IE]> tag-enclosed comments
2. Remove comment
3. Add the style {display: inline;} to the previous float ;}
4. Use the negative margin on the appropriate floating Div
5. Add an additional & nbsp; (for example, 10 spaces) to the original text (hacky way)

2. position relative and overflow hidden)

I encountered this problem many times. At that time, I was preparing a jquery tutorial, because I used a lot of overflow den to achieve the layout I wanted.
The problem occurs when overflow of the parent element is set to Den den and the child element is set to position: relative.
CSS-Trick has a good example to demonstrate this bug. Position: relative and overflow in Internet Explorer

Solution:

Add position: relative for the parent element;

3. Min-height for IE)

This is simple. ie ignores the Min-height attribute. You can use the following hack to fix it. Thanks to Dustin Diaz.

This solution works well in IE6, Mozilla/Firefox/Gecko, opera 7.x+, and safari1.2.

Solution:

 

Selector { Min-Height: 500px; Height: Auto! Important; Height: 500px; }

 

4. bicubic Image Scaling)

You will like this. Which of the following problems does ie affect image scaling? If you compare IE with other browsers, the image reduced by IE looks inferior to that of other browsers.

Solution:

 

IMG {-MS-interpolation-mode: bicubic ;}

 

5. PNG transparency (PNG transparency)

I guess everyone knows this, but I still put it here for future reference.
So if you want to use transparent images and GIF cannot give you the desired quality, you will need this hack for PNG. You must realize that if you use a PNG image as the background, you cannot set the background position.

Solution:

 

IMG { Filter: progid: DXImageTransform. Microsoft. alphaimageloader (...); }

 

6. IFRAME transparent background (IFRAME transparent background)

In Firefox and Safari, you should not have this problem because the IFRAME background is set to transparent by default, but not in IE. You need to use the allowtransparency attribute and add the following CSS code to achieve the goal.

Solution:

 

/* In the IFRAME element */ <IFRAME src = "content.html" allowtransparency = "true"> </Iframe> /* In the IFRAME docuement, in this case content.html */ Body { }

 

7. Disable the default vertical scroll bar of IE (disabled ie default vertical scroll bar)

By default, IE displays a vertical scroll bar even if the content is suitable for the window size. You can use overflow: auto to make the scroll bar appear only when you need it.

 

HTML { Overflow: auto; }

 

8.: hover pseudo class (: hover pseudo class)

IE only supports the hover pseudo class of the <A> element. You can use the hover event of jquery to achieve the same effect.

Solution:

 

/* Jquery script */ $ ('# List li'). Hover ( Function (){ $ (This). addclass ('color '); }, Function (){ $ (This). removeclass ('color '); } ); /* CSS style */ . Color { } /* HTML */ <Ul id = "list"> <Li> Item 1 </LI> <Li> Item 2 </LI> <Li> Item 3 </LI> </Ul>

 

9. Box hack Model)

This is the most popular bug in IE. Basically, ie calculates the width in different ways. Based on W3C standards, the total width of an element should be:
Total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-Right
However, the padding and border are not added when ie calculates the width:
Total width = margin-left + width + margin-Right

For more details, refer to the link: Internet Explorer and CSS box model.

Solution:

Use the W3C standard compatibility mode. IE6 or later versions can be computed based on W3C standards, but you will still encounter problems in ie5.

Or you can use CSS hack to solve this problem. All standard compatible browsers can read w \ idth: 180px except ie5.

 

# Content { Padding: 10px; Border: 1px solid; Width: 200px; W \ idth: 180px; }

 

10. Double margin bug (double margin bug fix)

If you have a floating element with a left/right margin, IE6 doubles the margin. For example, margin-left: 5px is changed to 10px. You can solve this problem by adding display: inline to the floating element.

Solution:

 

Div # Content { Float: left; Width: 200px; Margin-left: 10px; /* Fix the double margin error */ Display: inline; }

10 common ie bugs and Solutions