10 common IE bugs and solutions_html/css_WEB-ITnose

1. IE6 Ghost Text bug

Before I wrote this article, I encountered this bug. It's quite weird and funny. A piece of duplicate text that comes from nowhere is displayed close to the original text by IE6. (Annotation: You can also refer to Explorer 6 Duplicate Characters Bug for a bug demonstration). I couldn't fix it, so I searched for it, and sure enough, it's another IE6 bug.

There are many workarounds for this, but none of them worked for my example (I couldn't use some of them due to the complexity of the site). So I used a hack. Adding spaces after the original text seems to solve the problem.

However, I learned from Hippy Tech Blog that the reason behind the problem is due to html comment tags. IE6 cannot render it correctly. Here is a list of his suggested solutions:

Workaround :

1. Use tags to surround comments
2. Remove comments
3. Add style {display:inline;} on front float
4. Use negative margins on appropriate floated divs
5. In original text This adds extra (such as 10 spaces) (hacky way)

2. Position Relative and Overflow Hidden (Position Relative and Overflow Hidden)

I encountered this problem many times when I was preparing a tutorial on JQuery because I used a lot of overflow hidden to achieve the layout I wanted.
The problem occurs when the parent element's overflow is set to hidden and the child element is set to position:relative.
CSS-Trick has a great example demonstrating this bug. position:relative and overflow in internet explorer

Solution:

Add position:relative;

3. IE Minimum Height (Min-Height for IE)

This is simple, IE ignores the min-height attribute. You can use the hack below to fix it. Thanks to Dustin Diaz.

This solution works well in IE6, Mozilla/Firefox/Gecko, Opera 7.x, Safari1.2.

Solution:

selector {

selector {  
    min-height:500px;  
    height:auto !important;  
    height:500px;  
}

min-height:500px;

height:auto !important;

height:500px;

}

4. Bicubic Image Scaling

You will love this. IE's poor image scaling bothers you? If you compare IE to other browsers, IE's shrunk images don't look as good as other browsers.

Solution

:

img { -ms-interpolation-mode: bicubic; }

img { -ms-interpolation-mode : bicubic; }

5. PNG Transparency

I guess Everyone knows this, but I'm still listing it here for future reference. So if you want to use transparent images and GIF doesn't give you the quality you want, you'll need this hack for PNG. You must be aware that if you use a PNG image as a background, you will not be able to set the position of the background.

Solution:

img {  
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);  
}

img { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(.. .); }

6. IFrame Transparent Background

In Firefox and Safari you should not encounter this problem because by default, the background of the iframe is set to transparent, but in IE, this is not the case. You need to use the allowTransparency attribute and add the following CSS code to achieve this.

/* in the iframe element */  
 

/* in the iframe docuement, in this case content.html */  
body {
         
}

Solution

:

/* in the iframe element */

/* in the iframe docuement, in this case content.html */

body {

html {
    overflow: auto;  
}

      }

7. Disabled IE default Vertical Scroll bar (Disabled IE default Vertical Scroll bar) By default, IE displays vertical scroll bars even if the content fits the window size. You can use overflow:auto to have scrollbars appear only when you need them.

html { overflow: auto; }

8. :hover Pseudo Class (:hover Pseudo Class)

IE only supports the :hover pseudo-class of the element. You can use jQuery's hover event to achieve the same effect.

Solution:

/* jQuery Script */  
$('#list li').hover( 

    function () {  
        $(this).addClass('color');  
    }, 

    function() {  
        $(this).removeClass('color');  
    }  
); 

/* CSS Style */  
.color {  
        
} 

/* HTML */  

  
   
• Item 1
  
   
• Item 2
  
   
• Item 3
  

/* jQuery Script */

$('#list li').hover(

function () { $(this).addClass('color'); },

function() {
$ (this).removeClass('color');
}
);

/* CSS Style */

.color {

} /* HTML */ 

 

                                             li>Item 3

#content {  
    padding:10px;  
    border:1px solid;  
    width:200px;  
    w\idth:180px;  
}

9. Box model Hack(Box Hack Model)

This is the most popular bug in IE. The basic understanding is that IE calculates width differently. 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, IE does not add padding and sum when calculating the width. Border:

Total width = margin-left width margin-right

For more details, please refer to this link: Internet Explorer and CSS box model explained in detail

Solution :

Use w3c’s standards compatibility mode. IE6 or later can calculate based on w3c standards, but you will still encounter problems in IE5.

Or you can use CSS Hack to solve this problem. All standards-compliant browsers can read w\idth:180px except IE5.

div#content {  
    float:left;  
    width:200px;  
    margin-left:10px; 

    /* fix the double margin error */  
    display:inline;  
}

 

#content { padding:10px;

border:1px solid;

width:200px;

w\idth: 180px;

}

10. Double Margin Bug Fix

If you have a floated element with left/right margins assigned, IE6 will double the margins. For example, margin-left:5px will become 10px. You can solve this problem by adding display:inline to the floated element.

Solution:

div#content { float :left; width:200px; margin-left:10px; /* fix the double margin error */ display:inline; }