Resolve IE6/7 input margin double 4 methods

problem Description:input label (does not contain the type= "checkbox" type label) the parent element has a horizontal direction of margin, then the horizontal direction of the margin will be double display.

problem code:<div style= "width:300px; height:35px; BORDER:1PX Red solid;margin-left:15px; " ><input type= "Text"/></div>

Workaround:

1. Add *display:inline to the direct parent tag of input label;

<div style= "width:300px; height:35px; BORDER:1PX Red Solid;margin-left:15px;float:left;*display:inline; " ><input type= "Text"/></div>

(The above code adds float:left; only to ensure that div in block display, not necessary!) )


2. Change the level margin of the parent element to padding, directly avoid IE6, 7 this margin double bug (recommended)

<div style= "width:300px; height:35px; BORDER:1PX Red solid;padding-left:15px; " ><input type= "Text"/></div>

3. Add a haslayout div to the parent element or a div layer with haslayout but no margin

4. If the parent and child elements are not added to the floating attribute, directly in the parent element plus Overflow:hidden attribute can also solve this bug

Although there are 4 methods, personal comparisons tend to be second, which does not create new problems.