Off and on in the development process to collect a lot of bugs and its solution, are recorded in the article! Hope to solve similar problems can quickly solve, also hope you can be found in the message and follow up his 6 7 8 bugs and solution! 1: li margin &other; For no reason &throughout; Add
code is as follows:


<! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <HTML XMLNS="http://www.w3.org/1999/xhtml" > <Head> <Meta HTTP - equiv="content-type" Content="text/HTML; charset=gb2312"/> <Title> No title document </title> <The link href="http://www.jb51.net//css/css/style.css" rel="stylesheet" type="text/CSS"/> <Style type="text/CSS" > Body, ul, h1 {the font-family: Arial; The font - size: 12 px; }. Page {text - align: center; }. Page a {display: inline - block; Padding: 5 px 8 px; The text - decoration: none; Border: 1 px solid # 09 f; Background - color: # 0 cf; Color: # FFF; }. Page a: hover,. Page. Selected {border: 1 px solid # CCC; Background - color: # FFF; Color: # 000; The font - weight: bold; } </style> </head> <Body> <H1 > Pagination style </h1 > <Div class="page" > <A href="http://www.jb51.net//css/#" > 1 </a> <A href="http://www.jb51.net//css/#" class="selected" > 2 </a> <A href="http://www.jb51.net//css/#" > 3 </a> <A href="http://www.jb51.net//css/#" > 4 </a> <A href="http://www.jb51.net//css/#" > 5 </a> <A href="http://www.jb51.net//css/#" > 6 </a> <A href="http://www.jb51.net//css/#" > 7 </a> <A href="http://www.jb51.net//css/#" > 8 </a> <A href="http://www.jb51.net//css/#" > 9 </a> <A href="http://www.jb51.net//css/#" > 10 </a> </div> </body> </html> 3:6 CSS selectors to distinguish the IE6
code is as follows:


/* special */IE6. Content {color: red; }/* */div> other browser; P. content {color: blue; } 4:6 minimum height
code is as follows:


container # {min - height: 200 px; Height: auto!!! Important; Height: 200 px; %} 5: IE6100 height
code is as follows:


<Public: attach the event="an onfocus onevent"="makeblur ()" > </public: attach> <SCRIPT language=javascript> The function makeblur () {this. The blur (); } </script> Add the following code in the CSS, the

  code is as follows:  


{A behaviors: url (the blur. HTC); } solution 4 (recommended) : use CSS styles, the code can be added: a {BLR: expression_r (enclosing an onFocus=this. The blur ()} if is FF and other browser can write a {ouline: none; } 17: production 1 px lines form
code is as follows:


<Table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="# C0C0C0" style="border - the collapse: the collapse;" > <Tr> <Td> </td> <Td> </td> </tr> <Tr> <Td> </td> <Td> </td> </tr> <Tr> <Td> </td> <Td> </td> </tr> </table> 18: z - the index is invalid under IE6
code is as follows:


# blank {width: 100%; Height: 600 px; Background: black; Opacity: 0.4; Filter: alpha (opacity=40); Position: absolute; Left: 0; Top: 0; Z - index: 1; } is used in order to let the hierarchy at a glance. See: which showed that the content in the z - under the index to 1 layer of absolute positioning. Which showed that the content in the z - index absolute positioning is 1 layer. 2, compare is beauty picture on a page, the image in the translucent black absolute positioning layer above or below, it's easy to discern, in this way, you will be able to z - index doesn't work for what I said have a intuitive understanding. Complain of 2, 6: let me sink float now on real problems, reasons and solutions. First tell me about the first kind of z - index doesn't work no matter how high setting. This kind of circumstance happening conditions there are three: 1, the parent tag position attribute is relative; 2, question tag without the position property (not including the static); 3, question tags contain floating properties (float). You can take the code myself do a simple test:

  code is as follows:  


<Div> </div> <Div style="position: relative; z - index: 9999;" > <Img style="float: left;" SRC="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg"/> </div> Ya, the z - 9999 index, level is high enough, however, see the following figure: the comparison will know problem, someone may question, is this 6 relative himself caught a cold, and not floating (float) carrying &other; The a/h1n1 flu virus &throughout; . Good, I now get rid of floating, HTML code is as follows:

  code is as follows:  


<Div> </div> <Div style="position: relative; z - index: 9999;" > <Img SRC="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg"/> </div> results under IE6:
code is as follows:


<Div> </div> <Div style="position: relative;" > <Div style="position: relative; z - index: 1000;" > <Div style="position: absolute; z - index: 9999;" > <Img SRC="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg"/> </div> </div> </div> Pictures as you can see, the mm3 parent div tags is absolute positioning, 9999, hierarchy is much bigger than 1, absolute positioning of 1000 (10000), the parent tag hierarchy than black translucent layer of z - index: 1 most, however, we can flow IE6 shoes – – Look at the other children's shoes, represented by Firefox, Internet explorer 7 and 6 have the same bug, the reason is very simple, although all images div current dad level is very high (1000), but because the old daddy doesn't work, poor 9999 children so strong not down! Know why solve easily, add z - index to first dad after HTML code is as follows:

  code is as follows:  


<Div> </div> <Div style="position: relative; z - index: 1;" > <Div style="position: relative; z - index: 1000;" > <Div style="position: absolute; z - index: 9999;" > <Img SRC="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg"/> </div> </div> </div> Results 6 children be happy, spring is bright: 19: a list of CSS reset - style: none
code is as follows:


a, a: hover {the outline: none; The blur: expression (enclosing an onFocus=this. The blur ()); } 21: display: inline - block generates additional 6 px or 4 px margin
code is as follows:


YP_timelineChart_box li {display: - moz - the inline - stack; Display: inline - block; Zoom: 1; * display: inline; The text text-indent: - 3000 px; Width: 5 px; Vertical - align: bottom; Background - color: # 00 ff00; Position: relative; } page rendering results: every column to the right to produce 4 px margins, puzzling over may not be the solution, try to from the outside, but involves other problem: each overlapping li tags will be 1-2 px, interfere with the mouse hover state. Try to modify the doctype type no effect. Later try to another method: put the original HTML code structure: changed to: so as not to generate additional margin, also don't know why will appear this kind of problem. Temporarily put down first and study later. 22: pseudo-classes in IE6: the use of the hover and BUG
code is as follows:


<Style> A {color: # 333; } a span {color: green; } a: hover {} a: hover span {color: red; } </style> <A href=http://www.jb51.net//css/” http://www.taobao.com“ > Taobao <Span> Tao you like </span> </a> In IE7/FF, mouse onto the link, &throughout; Tao you like &throughout; Words will become red, but Internet explorer 6, no response. So if IE6 bugs is a and a: hover in the CSS definition is the same, that is to say, if a: hover in the no change style, hover will not be triggered. But if in a: hover {} to add some specific attributes, such as

  code is as follows:  


a: hover {border: none; } or a: hover {padding: 0; } or a: hover {background: none; } the hover can trigger. 23: the original IE6 support! Important
code is as follows:


demo {color: # F00! Important; Color: # 000; It says error understanding:}/* 6. The demo show below for black *//* 6 is correct understanding:. The demo show in red */. The demo {color: # F00! Important; }. The demo {color: # 000; } 24: remove button button on both sides of the white
code is as follows:


<! Doctype html> <Html> <Head> <Meta charset="utf-8"/> <Style> * {padding: 0; Margin: 0} input, the button {overflow: visible; Padding: 0; } </style> </head> <Body> <The form id="form1" name="form1" method="post" action="" > <Input type="submit" name="button" id="button" value="the solution of the margins around the http://www.jb51.net//css/button button"/> </form> <Button> <Span> The white space around the button button solution </span> </button> </body> </html> 25: Chinese fonts in the CSS notation
code is as follows:


<Div style="width: 600 px; height: 600 px; background: # 000;" > <Div style="width: 500 px; height: 500 px; background: # 333;" > <Div style="float: left; background: # 666; width: 400 px;" > <Div style="width: 300 px; height: 300 px; background: # 999;" > <Div style="width: 100%; height: 100%; background: # f00; position: absolute; left: 0; top: 0;" > In ie6 browser are full screen red, illustrate the ie6 browser of the percentage of the width and height, a relative positioning are relative or absolute positioning of elements, not for the HTML element, and the percentage of the width and height of ie6, relative is on a high wide display Settings of the element, and the percentage of the height setting failure, so the above code will appear in ie6 width across his parent and met width: 500 px; Elements, side set themselves into width: 500 px; The height setting is failure, this, let a person very egg pain! Ie6, really should leave early! </div> </div> </div> </div> </div> 27: Internet explorer does not cache the background image solution
code is as follows:


var ua.=the navigator userAgent. ToLowerCase (); Var isIE6=ua. IndexOf (" msie 6 ") > - 1;//determine whether for IE6//remove the CSS image under the flickr//IE6 does not cache the background image by default, each time you change the photos in the CSS will re-launch the request, use this method to tell IE6 cache if background image (isIE6) {try {document. ExecCommand (" BackgroundImageCache ", false, true); } the catch (e) {}} (2) directly on the page using a DIV element to load the image, it can really be cached for the image, the mouse also won't send the request. 28: CSS implementation under ie6 Max/min - width/height
code is as follows:


_width: expression (enclosing width> 300? "300 px", true); Max - width: 300 px; _height: expression (enclosing height> 300? "300 px", true); Max - height: 300 px; 29: CSS blank outside away from each other solutions
code is as follows:


body {width: 300 px; The font-family: 'Microsoft jas black; The font - size: 1 em; The text text-indent: 10 px; The line - height: 1.25; } div {background: # 000; Margin: 10 px; } div p {background: # f60; Margin: 15 px} this is a div element nested within a simple sample of p, don't copy the saved as HTML test first, after you finish reading the code above, do you think if it is out of effect as the chart for you? Ok, now you can copy the code above, save to a local, and then open in a browser. You will be surprised to find that its effect is presented to you is this: why is this so? According to CSS, there for block-level child elements of the element to calculate the height of the way, if there is no vertical borders and filling element, then its height is its child elements at the top and bottom of the distance between frame edge. Therefore, the child element at the top and bottom margin is prominent to the peripheral elements. 15 px p element from the outside and the outside div elements of 10 px distance 15 px to form a single vertical margin, in addition, in the form of the margin is not surrounded by div, but present in the periphery of the div. So, we see the second rendering. How to solve? I compare to recommend two kinds of solutions: first, for the peripheral elements define transparent borders. Specific to this case, the add border in div style: # 1 px solid DDD; Secondly, for the peripheral elements define padding filling.. Specific to this case, that is, add padding in div style: 1 px in addition, you can also through the peripheral elements absolute positioning, or floating defined child elements, etc. 30: pure CSS solution mtext vertical center
code is as follows:


<Style type="text/CSS" > . Alert {width: 400 px; Height: 250 px; Display: table - cell; Vertical - align: middle; Line - height: 1.5 em; Border: 1 px solid red; Alert_blank.}. {height: 100%; Width: 0; Display: inline; Vertical - align: middle; Zoom: 1; Alert_con.}. {width: 100%; Zoom: 1; Display: inline; Vertical - align: middle; } </style> <Div class="alert" > <Div class="alert_con >" Brother elder brother is a multiline text vertical center to center is a multiline text vertically ~ elder brother is a multiline text vertical center ~ elder brother is a multiline text vertical center ~ </div> </div> Its principle is: probably the first alert_blank containers, display: inline as inline elements, after its height was 100%, the width is 0, equivalent to close to the outer container left margin of a transparent line, which makes the outer container is only one line. Outer easy vertical - align: middle makes its internal is equal to the vertical center line of text. Truly serving content div is display: inline, it foreign and blank centered vertically, as long as the internal text does not exceed the height of the blank, the effect will be perfect. Although tell from the semantic, use div blank layout say don't in the past, but in spite of his flaws. Another: zoom: 1 is to trigger hasLayout. 31: regarding the flash cover floating div layer
code is as follows:


<! PUBLIC DOCTYPE HTML "-///DTD/W3C XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <HTML XMLNS="http://www.w3.org/1999/xhtml" > <Head> <Meta HTTP - equiv="content-type" Content="text/HTML; charset=utf-8"/> <Title> Test 6 text line of high performance </title> <Style type="text/CSS" > Body, ul, li p {margin: 0; Padding: 0; } the body {1.5 Tahoma font: 12 px/, "Tahoma", Arial, Helvetica, sans-serif; } ul {float: left; The list - style: none; Margin - bottom: 10 px; P {} ul li, margin - top: 4 px; Background: silver; Clear: the left; } ul li {float: left; Margin - top: 4 px; } </style> </head> <Body> <Ul> <LI> Time and tide wait for no man which </LI> <LI> Hjgt </ul> <P> Time and tide wait for no man which </p> <P> Hjgt

</body> </html> 33: using the method of cross-browser CSS to hide text
code is as follows:


ont - size: 0;//for firefox & Opera color: transparent;//for webkit overflow: hidden;//for the font - IE the size: 0; Filter: alpha (opacity=0); After self-test compatible browser below: Internet explorer 6-8 Firefox 1-4 Opera 9 1-6-10 Safari 3-5 Chrome 34: button in Chrome default has a margin of 2 px under
code is as follows:


<Div style="padding: 20 px; background: # f00;" > <Div style="background: # FFF, height: 200 px; margin: 50 px;" > My margin in ie failed </div> Solution to get rid of the height of the div inside# 0 - #


This concludes the body part