Browser CSS Bug and Bug solving method

Bugs and Solution list (the default runtime environment for the following instances is Standard mode):

How do I define a small height container in IE6 and earlier browsers?

Method:

#test {overflow:hidden;height:1px;font-size:0;line-height:0;}
IE6 and earlier browsers cannot directly define containers with smaller heights because the default is to have row heights

How do I fix a bug that creates double margins when IE6 and earlier browsers float?

Method:

#test {display:inline;}
When the margin value is resolved to double after floating in IE6 and earlier browsers, set the display property of the element to inline.

How do I simulate min-height effects in IE6 and earlier browsers?

Method:

#test {min-height:100px;_height:100px;}
Note that at this point #test can no longer set the value of overflow to hidden, otherwise the analog min-height effect will be invalidated

How to resolve the button in IE7 and earlier browsers with the increase of value on both sides of the white also with increasing the problem?

Method:

input,button{overflow:visible;}
How to solve the white space gap between Li and IE7 when there are 2 or more floats in Li under the browser?

Method:

Li{vertical-align:top;}
In addition to the top value, it can also be set to Text-top | Middle | Bottom | Text-bottom, even specific and value can be

How do I fix a 3-pixel bug in IE6 and earlier browsers?

Method:

. A{color: #f00;}. Main{width:950px;background: #eee;}. Content{float:left;width:750px;height:100px;background: #ccc ; _margin-right:-3px;} . Aside{height:100px;background: #aaa;}

Contentaside

Set margin-right:-3px for. Content under IE6 and earlier browsers, or you can set the. aside to float

How to solve the text overflow bug under IE6: "Spy Shadow Heavy" or "a pig story"?

Bug Recurrence:

. test{zoom:1;overflow:hidden;width:500px;}. box1{float:left;width:100px;}. box2{float:right;width:400px;}

↓ that's the extra pig.

Run the above code, you will find the text overflow, under the IE6 will be more than a "pig." The cause of this bug can be multiple mixes, such as floats, notes, width and height definitions, and so on. And the more the number of annotation bars, the more the overflow text will increase.

List some workarounds:
Delete all comments between box1 and Box2;
Do not set the float;
Adjust the width of the box1 or box2, for example, to adjust the width of the box to 90px

How do I resolve the problem that the link in the container is invalid after IE6 using the filter PNG image?

Method:

Div{width:300px;height:100px;_filter:progid:dximagetransform.microsoft.alphaimageloader (src= ' *.png ');} a{_ Position:relative;}
The workaround is to define a relative positioning property for the link within the container position the value of relative

How do I resolve a problem where IE6 cannot recognize a pseudo-object: First-letter/:first-line?

Method 1:

P:first-letter {float:left;font-size:40px;font-weight:bold;} p:first-line {color: #090;}
Add space: Adds a space between the pseudo-object selector: First-letter/:first-line and the curly brace "{" that contains the rule.

Method 2:

P:first-letter {float:left;font-size:40px;font-weight:bold;} p:first-line {color: #090;}
Line break: Wraps the entire curly brace "{" Rule area. See E:first-letter and E:first-line selectors for details

How do I resolve the problem that IE8 ignores pseudo-objects: the!important rule in first-letter/:first-line?

Bug Recurrence:

P:first-letter {float:left;font-size:40px;font-weight:bold;color: #f00!important;color: #090;}
As in the code, the color definition is invalidated under IE8 because there is a color that uses the!important rule. In view of this, try not to use the!important rule in the First-letter/:first-line:

How can i solve the problem of IE6 ignoring the!important rule in the same style?

Bug Recurrence:

Div{color: #f00!important;color: #000;}
As above code, IE6 and the following browser div text color is #000,!important and does not overwrite the following rules, that is,!important is ignored. The solution is to split the style into 2 details, see!important rules

How to solve the problem that the bottom of the IE6 and earlier browsers when the Li inner element is defined as an inline element of the Display:block?

Bug Recurrence:

A,span{display:block;background: #ddd;}

• CSS Reference Manuals
• CSS Discovery Tour
• Web Front-End Labs
• Test the Li interior element to create a blank at the bottom of an inline element with the Display:block set

As shown in the code, IE6 and earlier browsers each of the inline elements at the bottom of each Li will produce white space. The solution is to add zoom:1 to the inline elements inside Li

How do I fix a floating or absolutely positioned element with an undefined width in IE6 and earlier browsers that is set internally by the Zoom:1 block element?

Bug Recurrence:

#test {zoom:1;overflow:hidden;border:1px solid #ddd; background: #eee;} #test h1{float:left;} #test. nav{float:right; Background: #aaa;} #test. Nav ul{zoom:1;overflow:hidden;margin:0;padding:0;list-style:none; #test. Nav li{float:left;margin:0 5px;}

Phpstudy

• CSS Reference Manuals
• CSS Discovery Tour
• Web Front-End Labs

As above code, IE6 and earlier browser Div.nav will be set up Zoom:1 ul to open.

List some workarounds:
Set ul as floating element;
Set ul as inline element;
Set the width of the UL

How to solve the problem of Auto|hidden invalidation of parent element overflow attribute when IE7 and earlier browser element is relative positioning?

Bug Recurrence:

div{overflow:auto;width:260px;height:80px;border:1px solid #ddd;} p{position:relative;margin:0;}

If I am relative, my parent element overflow property is set to Auto|hidden will expire. If you are using IE and an earlier browser, you will be able to see this bug

If I am relative, my parent element overflow property is set to Auto|hidden will expire. If you are using IE and an earlier browser, you will be able to see this bug

As the code above, you will see that the DIV scroll bar will not work under IE7 and earlier browsers. The solution is to set the relative positioning of the div as well position:relative

Browser CSS Bug and Bug solving method