*Note: This is outdated for sure…
Here is a small list with some of the most weird and annoying IE bugs that you may almost every time come across.
As we look back to the older versions of IE, the problems seem to grow in number and although older versions of IE may seem like a part of the past now, there are still people out there trying to fight this big, fat, bullheaded bug called, Internet Explorer 6. So, here it is:
1. The “peekaboo” bug:
How to identify it: When parts of a div disappear and then somehow reappear when you scroll through the page or resizing the browser’s window.
Solution: zoom: 1; Add this property into the specific class or id. This is a property only seen by Internet Explorer without affecting any other browser at all.
Applies To: IE 6 , IE 7.
2. The “border” bug:
How to identify it: When the border is extending under a floated item and overflow property doesn’t seem to do anything about it.
Solution: zoom:1;
Applies To: IE 6.
3. The “layout” bug:
How to identify it: When an absolute positioned item is falling off its place ignoring the left or right properties.
Solution: Set the width property of the containing div to 100% or to a specific width.
Applies To: IE 6.
4. The “guillotine” bug:
How to identify it: When the bottom part of a floated element just disappears. Usually you may have 2 or 3 floated elements into a div.
Solution: Create a div at the end of the parent div with the class “clear” Then in the CSS file apply .clear {clear:both;}. Note that this bug has extremely many ways to appear and thus there is also a large number of ways to solve this. In some cases zoom:1; may do the job or declaring height:1%;.
Applies To: IE 6 , IE 7 .
5. The “double-margin” bug:
How to identify it: When using negative margin values and some extra space is created next to a floated item. It also happens when the margin is at the same direction of the float.
Solution: * HTML {display:inline;}. Create a style with this property into your code. This also applies only to the version 6 of Internet Explorer.
Applies To: IE 6.
6. The “broken box model” bug:
How to identify it: The total size of a div ( width + padding + border) is miscalculated. Actually only the width property is counted by IE.
Solution: Apply the padding into the elements of the block directly.
Applies To: IE 6.
7. The “minimum width and height” bug:
How to identify it: When min-height and min-width properties are ignored.
Solution: Apply: { min-height:150px; height:auto !important; height:150px;} to the specific element.
Applies To: IE 6.
8. The “unknown hover state” bug:
How to identify it: IE 6 doesn’t support the hover pseudoclass.
Solution: Apply Javascript or Jquery code in order to overcome this.
Applies To: IE 6.
9. The “wrong bottom” bug:
How to identify it: When you trying to vertically position an image at the bottom of the browser window but the image is getting stacked under the last paragraph instead.
Solution: html {height: 100%; }.
Applies To: IE 6.
10. The “Internet Explorer 6” bug:
How to identify it: When you set a link to display as block and the clicking is limited only to the text instead of the entire block.
Solution: .yourclass a {zoom:1;} or by setting a specific width for all the a tags.
Applies To: IE 6.
As you may have already understand, the zoom property actually fixes a lot of IE 6 bugs, so in cases that you may find yourself stuck without knowing how to fix an IE bug, just give it a try!
** Note: Personally I have stopped trying to fix things in IE 6. I mean, if you think about it, I already have a great number of bugs to deal with in IE 7 and 8 and maybe a couple in IE 9, so if I’m going to double the size of my HTML and CSS code just to fix things in IE 6 then I prefer not to.
Especially, if you bring HTML 5 into the picture then you have yourself some extra days of work to deal with some very, and I mean VERY, strange things that you couldn’t even know where to start in order to fix them (things can get really messed up). If on the other hand you strongly feel a strange urge to combine HTML 5 and IE 6, please let me know how it went (I mean it, pictures are welcomed too!).
