Common bug adjustment page compatibility in IE6

Common Bugs in IE6

When we deploy pages, we first conform to the standards. How do we write standards for a page? However, IE6 and other browsers are quite special, with a lot of bugs. Alibaba Cloud has a hundred battles with each other. We need to understand some common bugs of IE6, so that we can better debug the compatibility. below, Mr. Xiaoqiang will list some common ie6bugs for your research.

Structure Stability considerations
The most common problem is the chaotic and misplaced location of webpage elements.

1.1.1.doctype must have

Must be used at the beginning <! Doctype> mark all XHTML documents with the specified XHTML version and type. Only in this way can the browser use the webpage as a valid XHTML document and parse the webpage according to the specified document type.
<! Doctype> mark is related to browser compatibility. Delete <! Doctype>: How many browsers are available in IE6, IE7, IE8, firefox2, firefox3, and chrome when the right to display HTML pages is handed over to the browser, the page may display a certain amount of results, which is not allowed.

1.1.2margin doubling Problem

Floating margin but may appear
In general, two conditions must be met when this problem occurs:

The box needs to be floating. In the first case, margin is required. If the two conditions are met, the double margin problem usually occurs under IE6.

Solution:

_ Display: inline;

1.1.3 pixel gap problem on the bottom side of the IE6 Image

This problem may also occur in Firefox!

1. Place the IMG tag and the/Div tag in the same row.
<Div> </div>
But this is not easy to read. We know that the readability of the Code is the most important.
Therefore, the second method is recommended.
2. Set the display: block attribute on the IMG In the CSS style and set the image as the code below the block element.
IMG {display: block ;}
3. Floating

1.1.4 minimum element height in IE6

Under IE6, if you want to set the element Div to a height of around 19 pixels, you cannot set it. This is because the IE6 browser has a default height.
In IE6, this problem is caused by the high row by default, and there are many solutions, such as overflow: hidden font-size: 0;
 

1.1.5 leading to extra characters under IE6

Adding HTML comments between two floating boxes can cause extra characters.
Solution:
1. delete comments
2. If no width is specified
 
3. Place one more space at the end of the text


4. Add positioning to the box.
. Two {width: 100px; float: Left; position: relative ;}

1.1.6 text mixing floating 3 pixel spacing bug in IE6

Sometimes, after an image is floating, the text is surrounded by a 3 pixel distance.
Solution:
_ Margin-Right:-3px;

1.1.7 3 pixel spacing bug at the bottom of Li in IE6

If the content in Li is too complex, there is a 3 pixel White gap between Li and Li. Very troublesome

Solution:

Vertical-align: middle bottom, etc.

1.1.8 IE6 odd-high bug

We try to set the height and width of the box to an even number (positioning effect)

1.1.9 understand the features that the IE6 box will support

How big the content is, how big the box is
Other browsers are like IE6: Height: Auto! Important; highly adaptive
! Important has the highest weight in order to escalate the permission in all parts.
Both Internet Explorer 7 and later versions can be recognized by non-Internet Explorer.