Common BUG Debugging in CSS_html/css_WEB-ITnose

1. Layout??layout

Layout is a concept proposed by windows and is used to control the size and positioning of elements. Elements with layout are responsible for the size and positioning of themselves and their child elements, while elements without layout can only rely on the nearest ancestor element for control.

BUGs that usually appear in IE6 are most likely caused by layout. Therefore, when fixing BUGs in IE, the first thing is to try to force elements to have layout through rules to see if they can be fixed. .

Elements with layout by default include: body, html (in standard mode), table, tr, td, img, hr, input, select, textarea, button, iframe, embed, object, applet, marquee

You can also force elements to have layout by setting CSS properties:

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 elements to have layout:

1) overflow: hidden, scroll or auto

2) min-width: any value

3 ) max-width: any value other than none

Problems that often occur due to layout in IE6 include:

1) Elements with layout will not shrink: that is, if the element is set The size is determined, and when the element content exceeds the element size, the content usually overflows outside the element. In IE6, the element is expanded to accommodate the content.

2) Layout elements automatically clean up floats: A common example is text surrounding pictures. If the text paragraph has a layout, the text will no longer surround the picture.

3) Relatively positioned elements have no layout

4) Margins do not overlap between elements with layout

5) On block-level links without layout , the click area only covers the text

6) During scrolling, the background image on the list item appears and disappears intermittently

2. Hacks and filters

1) IE conditional comments

a) Applicable to IE5 and above

b) Applicable to IE6

c) lower than IE6

2) Apply the asterisk HTML hack

In IE6 and below, there is an anonymous root element surrounded by html element, so you can use this anonymous root element to apply specific rules to IE6 and lower browsers, such as

* html { width: 1px; }

3 ) Apply the sub-selector hack

Use the feature that sub-selectors are not understood by older versions of IE to create rules that only apply to modern browsers

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

Only browsers that support sub-selectors can apply this rule

3. Common BUGs and their fixes

1) Double margin floating bug??IE6 and Its lower version

bug: double the margins of any floated element

fix: set the display attribute of the element to inline

2) 3 Pixel text offset bug?? IE6 and lower

bug: When a non-floated element is adjacent to a floated element, a 3-pixel gap is automatically added between the two elements

Fixed: Method 1: Set non-floating elements to float; Method 2: Set rules for non-floating elements: _zoom: 1; margin-left: value; _margin-left: value-3px; (Note: zoom is the trigger layout, and the underline is a hack for lower versions of IE7)

3) IE6's peek-a-boo bug

bug: a floating element followed by a non-floated element, followed by a clear float Elements, all contained within a parent element with a background color or background image. Non-floated elements will be covered by the parent element and will not appear until reloading.

Fixed: Method 1: Remove the background color or picture of the parent element; Method 2: Avoid clearing the floating element from contacting the floating element; Method 3: Specify a line height for the parent element; Method 4: Combine the floating element with The position attribute of the parent element is set to relative.

4) Absolute positioning error in relatively positioned elements? IE6 and lower versions

Bug: The relatively positioned parent element contains absolutely positioned child elements, and when the child elements are positioned The reference object is not the parent element but the viewport. (Relatively positioned elements do not have layout in IE6)

Fixed: Force relatively positioned parent elements to have layout (set width or height, such as _height: 1%;)