There are many excellent articles abroad that you can learn from, so I decided to spend some time translating them. I don’t know if anyone has translated this article. The original name is 10 Awful IE Bugs and Fixes . I hope more people can read these excellent articles. Foreigners are very humorous, so I read the whole text. Experts take a detour
The following is the translation :
I've listed 10 common IE bugs and their solutions. I believe this will help you reduce the time you spend debugging layout inconsistencies in IE.
Author: kevin
Introduction
Everyone has their own story when it comes to dealing with IE. As a developer I have to deal with a lot of IE's quirks and sometimes you just want to bang your head against the wall. But over time, we learned a lot (sometimes it wasn't our fault, it was IE's fault!) and began to accept and understand IE's weird behavior. We have to do this because there are still a significant number of IE6 users. The best thing to do is to constantly test your website from different browsers from the beginning. It's much easier to solve layout problems from the beginning than after thousands of lines of html and css code.
There is a lot of movement protesting IE6, supported by a majority of web experts and ordinary users who don't seem to care much. So, what can we do now? We had to keep digging to resolve the issue with IE6. But wait, there’s exciting news. Based on w3cschool's monthly report, the number of IE6 users has decreased over the years. From 60.3% in June 2006 to 13.6% in September 2009. According to this ratio, we should be able to abandon IE6 by the end of 2010 (Annotation: The situation abroad is really good~.~)
Okay, back to reality, I've made a list of all the problems I've encountered before for future reference. I believe this will help you reduce the time you spend debugging layout inconsistencies in IE.
1. IE6 ghost text (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 because of 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 issue is due to html comment tags. IE6 cannot render it correctly. Here's a list of his suggested solutions:
Solution :
2. 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; to the parent element;
3. Min-Height for IE
It's 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 {
min-height:500px;
height:auto !important;
height:500px;
}