Some of the most basic bugs and solutions in IE browsers in CSS

How to solve bugs in css? I believe that many friends who have just come into contact with CSS in IE browser will have such questions. This chapter will introduce you to some of the most basic bugs and solutions in IE browsers in CSS. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. IE6 double margin bug

When an element on the page uses float to float, whether it is to the left or Float to the right; as long as the element has a margin pixel, the value will be multiplied by 2, for example, "margin-left:10px" In IE6, the value will be parsed as 20px. If you want to solve this BUG, ​​you need to add display:inline or display:block to the element and clarify its element type to solve the double margin BUG.

2. 3 pixel problem and solution in IE6

When an element is floated using float, there will be a 3px gap between the element and adjacent elements. The weird thing is that if the height of the container on the right is not set, the 3px gap is inside the adjacent container. When the height is set, it goes to the opposite side of the container. To solve this kind of bug, you need to add float to all elements laid out in the same row.

3. BUG of odd-numbered width and height in IE6

There is a certain difference between the display size of odd-numbered height and width in IE6 and the display size of even-numbered height and width. The main problem is the odd height and width. To solve this kind of problem, just try to write the height and width of the externally positioned div as an even number.

4. There is a gap below the picture link in IE6

There will be a certain gap below the picture in IE6, especially when the picture is vertically next to the picture, that is, You can see this gap. To solve such problems, you need to define the img tag as display:block or define the attribute corresponding to vertical-align. You can also write font-size:0

for the style corresponding to img. 5. The height of empty elements under IE6 BUG

If there is no content in an element, when When setting a height between 0-19px for this element in the style. The height of this element is always 19px.

There are four solutions:

1. Add: overflow:hidden in the css of the element

2. Insert html comment in the element:

3. Insert html white space into the element:  

4. Add to the element’s css: font-size:0

6. BUG of repeated text

In some more complex layouts, sometimes the last characters of the floating element will appear under the clear element.

The solution is as follows:

1. Make sure all elements have display:inline

2. Use "margin-right:-3px

on the last element

3. Add a conditional comment to the last item of the floating element, xxx

4. Use a blank div at the last element of the container, for this The specified div does not exceed the width of the container.

7. Z-index fails in IE6

The specific BUG is that the z-index of the element's parent element is set to 1 , then its child elements will be invalid when the z-index is set, and their levels will inherit the settings of the parent elements, causing some level adjustment bugs.

Conclusion: In fact, there are many bugs in IE6 Solutions can be solved using display:inline, font-size:0, and float. Therefore, when writing code, we must remember that once float is used, add a display:inline style to the element, which can effectively avoid floating. The style disorder problem. When using an empty DIV, in order to prevent its height from affecting the beauty of the layout, you can also add font-size:0 to it. This will easily avoid some compatibility issues.

The above is the CSS A complete introduction to some of the most basic bugs and solutions of Chinese IE browsers. If you want to know more about CSS video tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of Some of the most basic bugs and solutions in IE browsers in CSS. For more information, please follow other related articles on the PHP Chinese website!