Common BUG debugging in CSS

Common BUG debugging in CSS
1. layout-layout

Layout is a concept proposed by windows to control the size and positioning of elements. Elements with layout are responsible for the size and positioning of themselves and their child elements. elements without layout can only be controlled by recent ancestor elements.

The BUG that usually occurs in IE6 may be caused by layout. Therefore, when fixing the BUG in IE, the first thing is to try to force the element to have a layout through rules to see if it can be repaired.

By default, layout elements include body and html (in standard mode), table, tr, td, img, hr, input, select, textarea, button, iframe, embed, object, applet, marquee

You can also force the element to have a layout by setting the CSS attribute:

1) float: left or right

2) display: inline-block

3) width: any value

4) height: any value

5) zoom: any value

6) writing-mode: tb-rl

In IE7, the following attributes can also force the element to have a layout:

1) overflow: hidden, scroll, or auto

2) min-width: any value

3) max-width: any value other than none

In IE6, layout often causes the following problems:

1) elements with layout do not contract: If the element size is set and the element content exceeds the element size, the content Overflows out of the element, in IE6, elements are extended to adapt to the content.

2) The layout element automatically clears the floating: A common example is the text surrounding the image. If the text section has a layout, the text does not surround the image.

3) The relative positioning element has no Layout

4) the margin does not overlap between elements with la S.

5) on the block-level link without layout, click the area to only overwrite the text

6) The background image on the list item is displayed and disappears intermittently during scrolling.

2. hack and filter 1) IE condition Annotation

A) applicable to IE5 and later versions

B) applicable to IE6

C) less than IE6

2) apply the asterisk HTML hack

In IE6 and earlier versions, there is an anonymous root element surrounded by html elements. Therefore, you can use this anonymous root element to apply specific rules to IE6 and earlier browsers, for example

* Html {width: 1px ;}

3) Application sub-Selector hack

Use the sub-Selector features that are not understood by the old version of Internet Explorer to create rules that apply only to modern browsers.

Html> body {background-image: url(bg.png );}

This rule can be applied only to browsers that support sub-selectors.

3. Common Bugs and solutions 1) Double margin floating BUG -- IE6 and earlier bug: double the margin of any floating Element

Fixed: Set the display attribute of the element to inline.

2) 3-pixel text offset bug-IE6 and earlier versions

Bug: When a non-floating element is adjacent to a floating element, a 3-pixel gap is automatically added between the two elements.

Fixed: Method 1: set non-floating elements to floating; Method 2: set rules for non-floating elements: _ zoom: 1; margin-left: value; _ margin-left: value-3px; (Note: zoom is the trigger layout, while the underline is for hack earlier than IE7)

3) Internet Explorer 6's bug

Bug: A floating element is followed by a non-floating element, followed by a clear floating element. All elements are contained in a parent element with a background color or background image. A non-floating element is overwritten by the parent element, and is reloaded.

Solution: Method 1: remove the background color or image of the parent element; Method 2: Avoid contact between the floating element and the floating element; Method 3: specify a row height for the parent element; Method 4: set the position attribute of the floating element and parent element to relative.

4) absolute positioning error in relative positioning elements-IE6 and earlier versions

Bug: the parent element that is relatively located contains a child element that is absolutely located. When the child element is located, the reference object is not a parent element but a viewport. (Relative positioning elements in IE6 do not have layout)

Fix: force the parent element to have a layout (Set width or height, for example, _ height: 1% ;)