After studying CSS for a few days, let me use this cainiao to put CSS bug all at once!
1. 3px bug
Description: There will be a three-pixel bug between the two divs in IE. This bug occurs when a float element is used for a DIV, while a div is not used.
Solution: A. Use float for another element at the same time; B. Add a statement for the floating Div: margin-Right:-3px; or margin-left:-3px ;;
Example:
<HTML>
<Head> <title> ie 3px bug </title>
<Style type = "text/CSS">
<! --
Body {
Color: # FFF;
}
. Main {
Background: # CCC;
Border: solid 1px #000;
}
. Left {
Width: 100px;
Height: 100px;
Background: #444;
Float: left;
}
. Right {
Width: 100px;
Height: 100px;
Background: #000;
}
-->
</Style>
</Head>
<Body>
<Div class = Main>
<Div class = left>
Left
</Div>
<Div class = right>
Right
</Div>
</Div>
</Body>
</Html>
The above is a 3px bug.Code, We can add a statement in. Right: float: Left; or add margin-Right:-3px to. Left to solve this bug.
2.Peek-a-boo bug
Description: In a liquid (liquid) box, the content following a floating element will disappear inexplicably (only IE6 will happen ).
Solution: Define Height: 1% for the box (but hide ie 5.x/ MAC ). The Code is as follows:
/* \ */* HTML Div {
Height: 1%;
}/**/
The famous Holly hack? Hack ?). It works by setting a very small height value for a block (1% is almost a general criterion. However, ie 5 + win can extend the box to a sufficient height based on the content, that is, use the height as Min-height. In most cases, Holly hack enables ie5 +/win to behave according to actual behaviors.
3. Double margin bug
Description: This bug occurs when a floating element is set and the margin is set at the same time. As a result, the margin of the floating object in the same direction is twice the setting value.
Solution: Display: inline ;;
4. Min-height attribute ignored in IE
Description: Set Min-height for IE, ie will ignore it directly. In IE7, it is fixed (fixed ).
Solution: Use the following CSS hack:
* Html # Content {
Min-Height: 200px;
}
/* Internet Explorer *
/*\*/
* Html # Content {
Height: 200px;
}
/**/
5. Disappearing list background bug
Description: When the background color or Beijing image is set for the list item, and the list item is contained by a floating element, and the floating element uses relative positioning, then the background color or image may not be displayed.
Solution: Use relative positioning for list items, such as UL, ol, DL {position: relative ;}.
6.Three-pixel text jog
Description: When line boxes contains adjacent floating elements such as line text or images, there is a 3-pixel interval between line-box and floating edge.
Solution: Use the holly hack (the code in above 2) for this element or use the zoom attribute:
<! -- [If IE]>
<Style type = "text/CSS">
. Mybuggyelement {ZOOM: 1 ;}
</Style>
<! [Endif] -->
There are still many bugs, so I will not give them one by one. To sum up my experience, if the element is set to float, please also set floating for its lower-level elements; floating elements should be cleared in time (clear: both;); when writing CSS code, note that there must be a unit when the non-zero value is worth it. If it is zero, the Unit can be omitted. The above is my summary. If there are any mistakes, please correct them. At the same time, you can view the official website of Adobe css bug: http://www.adobe.com/cfusion/communityengine/index.cfm? Event = homepage & productid = 1 & loc = en_us
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
