Internet Explorer bug and Solution

E. The number of teeth and teeth is countless. IE6 is even more notorious. Here we summarize the five most serious bugs in IE and their solutions.

1. Transparent information in PNG format cannot be displayed in IE6

This bug is a nightmare of many web designers. Although it can be replaced by GIF, the expressive force of GIF is limited, and the shadow alone cannot be perfectly displayed, this undoubtedly gives the webpage a level of expressiveness.

Solution:

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

The IE filter is mainly used to solve the problem that PNG cannot be transparent.
Next, let's look at the second solution: JS
Click here to download
The above is the jquery plug-in used to solve this bug. It is strongly recommended!

2. The Selection box cannot be overwritten by the mask layer in IE6.

To solve this bug, please refer to a blog post I wrote: http://www.36ria.cn /? P = 395

3. Double margin in IE6

This is another horrible bug. Setting margin-left or margin-right in IE6 will automatically double.

Solution:

1. Div # Content {
2. Float: left;
3. Width: 200px;
4. Margin-left: 10px;
5.  
6. /* Fix the double margin error */
7. Display: inline;
8. }

Principle: The Key is display: inline;, which is converted into an inline element.

4. Hover only supports a and cannot be applied to other elements.

As we all know, the mouse movement and switching style in the webpage is a very wide range of functions, but IE6 only supports links, and other elements cannot be used: hover.

Solution: JS

1. /* Jquery script */
2. $ ('# List li'). Hover (
3.  
4. Function (){
5. $ (This). addclass ('color ');
6. },
8. Function (){
9. $ (This). removeclass ('color ');
10. }
11. );

1. /* CSS style */
2. . Color {
3. "># F00;
4. }

1. <Ul id = "list">
2. <Li> Item 1 </LI>
3. <Li> Item 2 </LI>
4. <Li> Item 3 </LI>
5. </Ul>

Principle: Using jquery's special hover events

5. The default vertical scroll bar is not displayed in IE.

The solution is as follows:

1. HTML {
2. Overflow: auto;
3. }