Browser-compatible tour of the third stop: IE common bugs

Browser-compatible tour of the third stop: IE common bugs
reprinted from: Http://www.w3cplus.com/css/ten-most-common-ie-bugs-and-how-to-fix-them-part-1

Internet explorer--Front-end siege division of the nightmare, 10 have nine front-end people think he is not shallow, should have killed him early, but God has the virtue, so there is no extinguish, in this case, the front-end of the master will do it. The first stop in the browser compatibility Tour: How to create conditional styles and the second leg of the browser compatibility tour: The hack notation of each browser has been used to understand some basic ways to deal with compatibility. So this section starts the third stop of the browser-compatible tour: IE common bugs, in this section, you can learn about the common bugs in IE, and how these bugs to avoid happening, or what happens, how we will solve him. Are you interested? Interested children's shoes will begin our trip. first, floating elements of the double margin bug

The double margin bug of floating element is a classic bug in IE6 and its following versions, triggering this bug is caused by setting float to the element and setting the margin value in the same direction as float, at this time in IE6 (IE6 the following version we have gone to ignore) will produce a double margin of the bug. Let's look at a piece of code first:

		. demo {
			background: #95cfef;
			border:1px solid #36f;
			Float:left;
			height:100px;
			margin:30px 0 0 30px;
			width:300px;
		}
	

effect

Repair method

The way to fix the King bug is simple, just change the display style of the floating element, that is, add a "display:inline" attribute to the floating element, so that you can easily solve the "double margin of floating element" bug. The following is the modified code:

		. demo {
			background: #95cfef;
			border:1px solid #36f;
			Display:inline;
			Float:left;
			height:100px;
			margin:30px 0 0 30px;
			width:300px;
		}
	

second, overcome the box model bug

Box model bugs often occur when you set the width and height of an element and set the element's padding or border value, which changes the true size of the element. Another example of the image, we do a 960px layout, the left column is 220px width, the main content is 720px width, they are 20px between the spacing, at this time the design needs in the left column has a 10px around the padding, if we press the following code to write will produce a bug.

Html Markup

		<div id= "wrap" >
			<div id= "left" >left</div>
			<div id= "content" >main</div>
		</div>
	

CSS Code

		#wrap {
			width:960px;
			Background: #66CCFF
		}
		#left {
			background: #FFCC99;
			Float:left;
			padding:0 10px;
			width:220px;		
		}
		#right {
			background: #9933CC;
			Float:right;
			width:720px;
		}
	

At this point the div#left will change its actual width, let's take a look at one of the following graphs, which is the div#left when there is no padding value, and the following figure is padding Div#left:

This bug will exist in all browsers, because the padding value in Div#left changes the original width of 220px, it is not difficult to overcome this bug, only need to add a div inside the div#left, and move the padding value into the new added Div.

			<div id= "wrap" >
				<div id= "left" >
					<div>left</div>
				</div>
				<div id= "Content" >main</div>
			</div>
	

CSS Code

		#wrap {
			width:960px;
			Background: #66CCFF
		}
		#left {
			background: #FFCC99;
			Float:left;
			width:220px;		
		}
		#left Div {
			padding:0 10px;			
		}
		#right {
			background: #9933CC;
			Float:right;
			width:720px;
		}
	

This example only adds the padding value, if you add the border value in the Div, we also need to move the border value into the internal Div, which makes it easy to overcome the bug caused by the box model. Of course, there is one way to do this without adding additional tags, which is to recalculate the width, but this approach is not a cure for the problem, and the niche does not advocate the use of this method. iii. Setting the minimum height and minimum width of the element

In Web page design, sometimes in order to achieve the uniform rendering style of elements, we sometimes need to use min-height and min-width to control the element's minimum height and minimum width values. In other browsers are operating normally, but this IE6 do not recognize others. Therefore, in the use of Min-height and min-width, in order to achieve the same effect, we have to deal with the IE6 separately. One of the min-height to solve is quite simple, but min-width in IE6 under the smooth solution is a bit of trouble (about IE6 under the min-width put to the back together to explore) here we mainly look at the min-height solution.

using the!important method to repair

The first method uses the "!important" to solve, let Min-height in IE6 under the normal work, the specific code is as follows:

		. demo {
			min-height:100px;
			Height:auto!important;/* Modern Browser, the content height of more than 100px automatically get its height *
			/height:100px;/* This value setting and the Min-height value, Because the height of the IE6 element depends on the height of the content itself, so the content height is lower than the Min-height value, in order to achieve the min-height effect, you need to give the element an explicit height value */
		}
	

Use the Sub-selector method to fix

We all know that IE6 does not support the sub-selector, so we can also use this method to solve the effect of min-height in IE6

		. demo {
			min-height:100px;
			height:100px;
		}
		Html>body. demo {
			height:auto;/* only modern browsers can recognize */
		}
	

four, block element horizontal center

Element Center, we have met, and sometimes a lot of children's shoes will ask, how my div element in the IE6 can not center it. In fact, this bug is not always happen, as far as I check the relevant information and many tests, this bug will only occur in IE6 quirks mode, know where the problem is, it is not difficult to solve, the most direct way is to remember the head of your page plus doctype. For more information about the DOCTYPE statement can be viewed here. Let's fix this bug for IE6 's quirks mode.

CSS Code

		#container {  
        border:solid 1px #000;  
        Background: #777;  
        width:400px;  
        height:160px;  
        margin:30px 0 0 30px;  
    }  
      
    #element {  
        background: #95CFEF;  
        Border:solid 1px #36F;  
        width:300px;  
        height:100px;  
        margin:30px Auto;        
    }
	

the resulting effect is as shown in the figure

This is mainly because IE6 's quirks mode does not recognize the margin Auto property value, but fortunately, solving the bug is not complicated. Just add "Text-align:center" to the parent element of the center element, and then add "Text-align:left" to the center element to re-align the element text to the left

		#container {  
        border:solid 1px #000;  
        Background: #777;  
        width:400px;  
        height:160px;  
        margin:30px 0 0 30px;  
				text-align:center;/* allows child elements to be horizontally centered in the IE6 quirks mode
    *  
      
    /} #element {  
        background: #95CFEF;  
        Border:solid 1px #36F;  
        width:300px;  
        height:100px;  
        margin:30px Auto;        
				text-align:left;/* Reset text alignment so that the text is left aligned */
    }
	

Of course, the problem of the center of the element is a more interesting topic, if you are interested in this can also read the previous I collated "CSS production horizontal vertical alignment" article, so that you have a deeper understanding of the center of the element. v. List of Li's stair bugs

Li in the IE6 under the stair-like effect, also can be considered IE6 a classic bug. He usually happens to put some element content in Li (for example a) and float it, but Li itself does not float, at this point in IE there will be a staircase, the specific first look at the following code:

HTML Markup

		<ul>  
        <li><a href= "#" ></a></li>  
        <li><a href= "#" ></a></ li>  
        <li><a href= "#" ></a></li>  
    </ul>
	

CSS Code

		UL {  
        list-style:none;  
    }  
      
    Ul Li a {  
        display:block;  
        width:130px;  
        height:30px;  
        Text-align:center;  
        Color: #fff;  
        Float:left;  
        Background: #95CFEF;  
        Border:solid 1px #36F;  
        margin:30px 5px;  
    }
	

Let's look at the comparison of the effects under the browser

There are two ways to fix this bug, so let's take a look at

Fix it one : The simplest way to fix this bug is to add a float to the LI element, so you just have to do it.

		UL li {float:left;}
	

Fix Method Two : This method is also very simple, is to apply "Display:inline" on the LI element

		UL li {display:inline;}
	

Six, Li blank spacing

This bug is also for Li, under IE will add to the vertical distance between Li and Li, other than to say, first look at the following code

HTML Markup

		<ul>  
     <li><a href= "#" >link 1</a></li>  
     <li><a href= "#" >link 2</ a></li>  
     <li><a href= "#" >link 3</a></li>  
    </ul>
	

CSS Code

		UL {  
        margin:0;  
        padding:0;  
        List-style:none;  
    }  
      
    Li a {  
        background: #95CFEF;  
        Display:block;  
    }
	

Let's also look at the contrast chart under the browser

Although there are such annoying things in IE6, fortunately, we just need to be careful when we write the code, we can easily avoid such bugs appearing on your page.

method One:

The simplest way is to give the <a> tag explicit definition of a width, using the method of declaring width to trigger the haslayout of IE browser, of course you can also explicitly define a height, the same can be resolved, the code is as follows:

		Li a {width:200px;}
	

Method Two:

Method Two is to float on the <a> tab and clear the float

		Li a {
                        display:block;
			Float:left;
			Clear:left;
		}
	

Method Three:

Method Three is also relatively simple, just add an inline element display on the LI tag

		Li {display:inline;}
                Li a {display:block;}
	

method Four:

This approach is to set a solid bottom line on each list Li

UL Li {border-bottom:1px solid #666;}

This method problem is solved, but generated a new problem, that is, Li Bottom has an implementation, if the solid line color and page background color inconsistency will give you a visual difference, so the best bottom color set to your page the same background color, of course, you can also try to solve the following methods:

UL Li {border-bottom:1px solid #ffffff; display:block; Margin-bottom: -1px;}

Seven, IE6 cannot set the micro-height of the element

This bug is also very interesting, sometimes we use the div element in the Web page to simulate line or make white spacing, explicit in the element defines a good few height, such as 2px height, but under the IE6, he is not at 2px height of the world, such as the following code

		. demo {
			background: #95CFEF;  
		  Border:solid 1px #36F;  
		  width:300px;  
		  height:2px;  
		  margin:30px 0;
		}
	

Then let's look at the browser's contrast chart:

The bug that caused this is actually very simple, because in IE browser, he will reject height less than the size of the setting, so it is very simple to solve, we just need to set the font size of the element to "0", if for more secure, you better add "Line-height" also for "0", specifically see the following code

		. demo {
			background: #95CFEF;  
		  Border:solid 1px #36F;  
		  width:300px;  
		  height:2px;  
			font-size:0;
			line-height:0;
		  margin:30px 0;
		}
	

Above is through the font size to solve, in fact, there is a more simple way, the use of "Overflow:hidden" will be more than the height of the portion directly cut off, so as to achieve 2px micro-height settings, as follows

		. demo {
			background: #95CFEF;  
		  Border:solid 1px #36F;  
		  width:300px;  
		  height:2px;  
		  margin:30px 0;
			Overflow:hidden;
		}
	

Viii. collision of Overflow:auto and Position:relative

This bug is also called "Out of Bounds bug", and this bug only appears in IE6 and IE7, there are two block elements, the element is set Overflow:auto, the child element is set position:relative and its height is greater than the parent element, in IE6 and IE7 will produce A more ugly Bug, that is, the child element block is not hidden will overflow the parent block, and in IE8 and FF and IE5.5 is also shown to be normal, let us first look at the effect of this example:

HTML Markup

		<div id= "wrap" >
			<div id= "SubDiv" ></div>
		</div>
	

CSS Code

		#wrap {
			border:1px solid red;
			height:150px;
			width:200px;
			Background:orange;
			Overflow:auto;
		}
		#subDiv {
			border:1px dotted blue;
			Background:lime;
			height:200px;
			width:150px;
			position:relative;
		}
	

Effects in the browser

To solve this ugly bug we just have to set a position:relative in the parent element, and the property will cause IE6 and IE7 to revert to the normal state.

		#wrap {
			border:1px solid red;
			height:150px;
			width:200px;
			Background:orange;
			Overflow:auto;
			position:relative;
		}
	

This is a overflow in the ie7~ie6 bug, not only the value of auto will appear this bug, that is, you set Overflow:hidden will also appear this bug. The workaround is to simply add a position:relative to the parent element; Nine, floating layer dislocation

Floating layer dislocation can occur when the content exceeds the width defined by the outsourced container. In Firefox, IE7, IE8, and other standard browsers, the content is just beyond the edge, but in IE6 the container ignores the defined width value, and the width increases incorrectly as the content width grows. If a floating element is followed by this floating element, it can cause dislocation.

HTML Markup:

		<div id= "Container" >  
		    <div id= "left" >http://net.tutsplus.com/</div>  
		    <div id= "right" ></div>  
		</div>
	

CSS Code

	  #container {  
        background: #C2DFEF;  
        Border:solid 1px #36F;  
        width:365px;  
        margin:30px;  
        padding:5px;  
        Overflow:auto;  
    }
			#left, 
			#right {  
	        background: #95CFEF;  
	        Border:solid 1px #36F;  
	        width:100px;  
	        height:150px;  
	        margin:30px;  
	        padding:10px;  
	        Float:left;  
	    }
	

Effect Diagram

There is no good way to solve such a bug, you can only add Overflow:hidden in the element, the content will be more directly cut off, such as:

#left {Overflow:hidden;}

Although Overflow:hidden can be used, or overflow:scroll, to fix, but hidden easily lead to other problems, scroll will destroy the design. Preferably using a fixed layout or using a good width of 10, IE6 under the hide-and -seek

This strange Bug is IE6 and the following version, why a name like this, because in some cases the text appears to disappear, re-refresh the hidden parts will appear again. The condition of this Bug is: a burst of container floating element followed by some non-floating elements, and non-floating elements have some definitions: hover link, then in IE6 and the following version, when the link in the suspended state will trigger this strange and non-resistant Bug.

The best way to solve this bug is to clear the float, because he is a bug caused by floating. There is a way to clear float, you can refer to "clear float".

The above main collection of 10 kinds of bugs, you can say that these are classic bugs. Hopefully these kinds of things will give you the convenience of future work, so that you can avoid the bug before it has appeared. So the third stop we also want to say Byebye, if you need to face this nasty ie every day, niche suggest you calm down to carefully read. It will be helpful to you. If you have any better advice, remember to tell me. Or give me a message in the comments. :)

Update One:

On the basis of the above, add a typical IE6 bug:ie6 in the absolute positioning, floating elements mixed when the bug. A content block that contains two floating boxes, plus an absolutely positioned box, where the IE6 floating element disappears when the following style is set.

HTML Code

    <div class= "Content" >
      <div class= "abs" >abs</div>
      <div class= "main" >main</div >
      <div class= "Sub" >sub/div>
    </div>
  

CSS Code

    *{padding:0; margin:0;}
    . content{width:600px;}
    . Abs{position:absolute; left:0; top:0; width:600px; height:120px; background: #1f3a87;}
    . Main{float:left; width:300px; height:200px; background: #f3f3f3;}
    . sub{float:left;width:300px; height:200px; background: #bc2931;}
  

The above code in the IE6 under the navigation will find that the absolute positioning element is missing.

Workaround: Add a display:inline style to the content to resolve. The width of each element is main + sub + 2 < content. Add a margin-right:-3px style to sub and let main and sub not fill content to resolve. Add an empty <div></div> before the main element, such as ... <div></div><div class= "main" > Add a DIV element to the ABS element, such as < Div><div class= "ABS" >abs</div></div>