Common bug Debugging in CSS

1. Layout--layout

Layouts are concepts that Windows proposes to control the size and positioning of elements.

Elements that have a layout are responsible for the size and positioning of themselves and their child elements, while elements with no layout can only be controlled by the recent ancestor elements.

A bug that usually occurs in IE6. It's probably due to the layout, so when fixing bugs in IE, the first thing to do is try to force the elements to have a layout and see if they can be repaired by rules.

Elements that have layouts by default contain: Body, HTML (Standard mode), table, TR, TD, IMG, HR, input, select, TextArea, button, IFRAME, embed, object, applet, Marquee

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

1) Float:left or right

2) Display:inline-block

3) Width: No matter what the value

4) Height: No matter what the value

5) Zoom: No matter what the value

6) Writing-mode:tb-rl

In IE7, the following properties can also force elements to have a layout:

1) Overflow:hidden, scroll, or auto

2) Min-width: No matter what the value

3) No matter what the value is outside the Max-width:none

Issues that often arise in IE6 due to layout include:

1) elements that have a layout do not shrink: that is, if the element is set to a size, and the element content exceeds the element size, the content is usually overrun outside the element, while IE6 expands the element to fit the content.

2) Layout elements Self-actively clean up floating: A common example is wrapping text around a picture, assuming that the text paragraph has a layout, the text no longer wraps around the picture.

3) Relative positioning of elements without layout

4) margins do not overlap between elements that have layout

5) on block-level links without layouts, click the area to overwrite only the text

6) in the scroll. A background picture on a list item intermittently displays and disappears

2, hack and filter 1) IE conditional gaze

A) applies to IE5 and its higher version number

<!--[if IE]

<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>

-

b) Suitable for IE6

<!--[if IE 6]

<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>

-

c) less than IE6

<!--[If Lt IE 6]

<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>

-

2) apply asterisk HTML hack

In IE6 and its lower version number, there is an anonymous root element. Surrounds the HTML element. It is therefore possible to use this anonymous root element to tell that a particular rule is applied to a browser on IE6 and its lower version number, as

* HTML {width:1px;}

3) Apply sub-selector hack

Use the feature that the sub-selector is not understood by the old version of IE. Create rules that apply only to modern browsers

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

Only browsers that support sub-selectors have the ability to apply this rule

3. Common bugs and how to fix them 1) double margin floating bug--ie6 and its lower version number bug: No matter what floating element's margin doubles

FIX: Set the display property of an element to inline

2) 3 pixel text offset bug--ie6 and its lower version number

BUG: When a non-floating element is adjacent to a floating element. Two elements will voluntarily join a 3-pixel gap

FIX: Method One: Set non-floating elements to float; method Two: Set rules for non-floating elements: _zoom:1; Margin-left:value; _margin-left:value-3px; (Note: Zoom is the touch Announcement board, and the underscore is for the IE7 lower version number of the hack)

3) IE6 Hide and Seek bug

BUG: A floating element follows a non-floating element, followed by a clear floating element, all of which are included in a parent element with a background color or background image. Non-floating elements are overwritten by the parent element, and are loaded again before they appear.

FIX: Remove the background color or picture of the parent element; method Two: Avoid removing floating elements from contact with floating elements; method Three: Specify a row height for the parent element, method four: Set the Position property of the floating element and the parent element to relative.

4) Absolute positioning error--IE6 and its lower version number in the relative positioning element

BUG: The relative positioning of the parent element includes an absolutely positioned child element. Sub-element positioning is not a parent element but a viewport. (the relatively positioned element in IE6 does not have a layout)

FIX: Forces relative positioning of the parent element to have a layout (set width or height, such as _height:1%;)

<link rel= "stylesheet" type= "Text/css" href= "Ie.css"/>

Common bug Debugging in CSS