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

Browser-compatible tour of the third stop: IE common bugs
reproduced 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 personnel think he for the world is not shallow, should have destroyed him earlier, but God has the virtuous, so did not destroy, in this case, the front of the attack will be on the way. The first leg of the browser-compatible tour: How to create a conditional style and the second stop for a browser-compatible tour: The hack of browsers is an understanding of some of the basic ways to handle compatibility. So this section begins the third stop of the browser compatibility tour: IE common bugs, in this section, you can learn about the common bugs in IE, and how these bugs are going to avoid it, or what we will do to solve it. Are you interested? Interested children will start our trip. one, floating element double margin bug

The double margin bug for floating elements is IE6 and a classic bug in the following version that triggers the bug by setting float to the element and setting the margin value in the same direction as float, at which point we drift over IE6 (IE6 below). A bug with a double margin value will be produced. 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 this king's bug is simply to change the display style of the floating element, which means adding a "display:inline" attribute to the floating element so that you can easily fix the "double margin" bug of the floating element. Here 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, to overcome the box model bug

Box model bugs often occur when you set the width and height of an element while also setting the element's padding or border value, which will change the true size of the element. To change the image of a bit, we carry out a 960px layout, inside the left column is 220px width, the main content is 720px width, they are 20px between the spacing, the design needs in the left column has a 10px around the margin, 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 Div#left will change its actual width, let's look at one of the graphs below, where there is no padding value when the Div#left, and the following figure is padding Div#left:

This bug will exist in all browsers because the padding value in Div#left changes the initial width of 220px, so it's not difficult to overcome this bug, just add a div inside the div#left, and move the padding value into this newly 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 a padding value, if the div added border value, we also need to move the border value into the internal Div, so that the box model can easily overcome the bug. Of course there is a way to solve the problem of not adding extra labels, which is to recalculate the width, but this method is palliative and not radical, and the niche does not advocate the use of this method. third, set 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 minimum height and the minimum width of the element. In other browsers are operating normally, but this IE6 do not identify 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 another. One of the min-height is quite simple to solve, but min-width under the IE6 to smooth out a bit of trouble (about IE6 under the Min-width put together to discuss) here we mainly look at the min-height solution.

using!important method to repair

The first method uses "!important" to solve, let min-height under IE6 can work normally, the specific code is as follows:

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

using 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 min-height effect under IE6

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

Four, the block element horizontal center

Element Center, we have met, and sometimes have a lot of children's shoes will ask, how my div elements in the IE6 can not be centered. In fact, this bug is not when will happen, according to my access to relevant information and many tests, this bug will only happen in the IE6 quirks mode, know where the problem is, it is not difficult to solve, the most direct way is in your page head remember to add doctype. The DOCTYPE declaration can be viewed with a click here. Here's how to solve a bug like IE6 's quirks pattern.

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 shown in the figure

This is mainly because the IE6 quirks mode does not recognize the value of the Auto property of margin, but it is not complicated to solve the bug. Just add "Text-align:center" to the parent element of the centered element, and then add "Text-align:left" to the center element to get the element text left-aligned again

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

Of course, the center of the element is a more interesting topic, if you are interested in this can also read the previous I organized the "CSS Horizontal vertical alignment" of the article, so that you have a deeper understanding of the center of the element. v. List Li's Staircase bug

Li in the IE6 under the stair-like effect, can be regarded as a classic IE6 bug it. He usually happens to put some element content in Li (for example, a) and float it, but Li itself does not float, at this time 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 solve this bug, so let's look at it together.

Fix Method One : The easiest way to solve this bug is to add a float to the LI element, so you can solve the

		UL li {float:left;}
	

Fix Method Two : This method Two 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 aimed at Li, in IE will be an unprovoked increase in Li and Li between the vertical distance, others do not 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;  
    }
	

Also, let's look at the contrast graph in the browser

Although there are such annoying things in IE6, it is fortunate that we just need to be careful when writing code to avoid such bugs appearing on your page.

method One:

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

		Li a {width:200px;}
	

Method Two:

The second method is to float on the <a> label and clear the floating

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

Method Three:

Method Three is also relatively simple, only on the Li tag with an inline element display

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

method Four:

This method is to set a solid line on each list Li

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

The problem with this approach is solved, but a new problem is generated, that is, the bottom of Li has a implementation, if the solid line color and page background color inconsistency will bring you visual differences, so the best line color set to your page the same background color, of course, you can also try the following methods to solve:

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

the micro-height of the element cannot be set under IE6

This bug is also very interesting, sometimes we use DIV elements in a Web page to simulate line or to make white space, explicit in the element definition of a good little height, such as 2px height, but under the IE6, he has never seen the height of 2px, such as the following section of code

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

Next, we'll look at the browser's contrast chart:

The bug that caused this is actually very simple, because in IE browser, he will reject the height is less than the size of the settings, so it is very easy to solve, we need to set the element size to "0", if for more secure, you'd 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;
		}
	

The above is through the font size to solve, in fact, there is a simpler way, using "Overflow:hidden" will be more than the height of the section directly cut off, so as to achieve the micro-height of 2px settings, specific as follows

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

the collision between Overflow:auto and Position:relative

This bug is also known as a "bug out of Bounds", which only appears in IE6 and IE7, has two block elements, the elements are set Overflow:auto, the child element is set position:relative and its height is greater than the parent element, and is generated in IE6 and IE7 An ugly Bug, where the child element blocks are not hidden, overflow the parent element block, and in IE8 and FF and IE5.5 are normal, let's take a 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 simply set a position:relative attribute in the parent element, which causes IE6 and IE7 to revert to their normal state.

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

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

A floating layer dislocation problem occurs when the content exceeds the width defined by the outsourced container. In Firefox, IE7, IE8, and other standard browsers, the excess content is just beyond the edge, but in IE6 the container ignores the defined width value, which can be incorrectly increased with the width of the content. If you follow a floating element after this floating element, it can cause a dislocation problem

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 chart

There is no good way to solve such a bug, you can only add Overflow:hidden to the element and cut out the extra content directly, such as:

#left {Overflow:hidden;}

Although Overflow:hidden can be used or overflow:scroll to be corrected, 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 Hide and seek

This strange Bug is IE6 and the following version, why this name, because in some cases the text seems to disappear, refresh the hidden parts will not appear again. The condition for this Bug is that a burst of a container floating element followed by some non floating elements, and some of the non floating elements are defined: hover links, then in IE6 and the following version, when the link in the suspended state will trigger this strange and no resistance Bug.

The best way to solve this bug is to clear the float because it is a bug that is caused by floating. You can refer to clear float for a method of clearing the float.

The main collection of 10 kinds of bugs, it can be said that these are classic bugs. Hopefully these kinds of work will bring you convenience in the future, so that you can avoid the bugs before they happen. Then the third stop we also want to say Byebye, if you need to face the annoying ie, the niche suggests you calm down to read carefully. It's going to help you. If you have better advice, remember to tell me. Or give me a message in the comments. :)

Update One:

Appends a typical IE6 bug:ie6 to a bug in which absolute positioning and floating elements are mixed. A content block, which contains two floating boxes, plus an absolutely positioned box, and a bug that IE6 floating element disappears when you set the following style.

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 browsing under IE6 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 main + sub + 2 < content. Add a margin-right:-3px style to the sub so that main and sub are not filled with content to resolve. Add an empty <div></div> before the main element, such as ... <div></div><div class= "main" > nesting a DIV element for the ABS element, such as < Div><div class= "ABS" >abs</div></div>