Common CSS compatibility issues under IE browser

"1" ie6-browser the child element can open the parent set wide

<! DOCTYPE html>
　
"2" ie6-browser under the minimum height problem, set (0-15px) height is less than or equal to 15px elements, under the IE6 will be treated as 15px
Solution
[1] Set Font-size to 0, but minimum height is 2px
[2] Setting the Overflow:hidden, but the minimum height is 1px
[3] To achieve a minimum height of 0, can only be not set height
<! DOCTYPE html>
Border bug
"1" ie6-browser under 1px dot line border, Dot line will become dashed
<! DOCTYPE html>
The background of the "2" standard extends to the border area, while the background of the Ie7-browser extends only to the padding area.
<! DOCTYPE html>
"3" in the ie10-browser <a> tag contains the  element will produce a border
"Fix" to picture set {Border:none}
<! DOCTYPE html>
Box model Bug
"1" ie7-the parent has a border under the browser, cannot prevent the child element's upper and lower margin value passing
"Resolve" triggers the haslayout of the parent
<! DOCTYPE html>
"2" does not set the document declaration under the Ie7-browser will cause the weird box model parsing. Content wide =width-2*padding-2*borderwidth under the weird box model
"3" ie6-using margin negative value, so that the element is moved out of the parent, the removal of the part will be deleted by the parent
"Resolve" to the sub-level and relative positioning relative
Libug
"1" (Li's 4px void bug) ie7-Browser, Li itself does not float, but the content is floating, Li will be more than 4px gap
Solution
[1] Add float to Li
[2] Setting vertical-align
<! DOCTYPE html>
"2" (4px Gap under Li and minimum height coexistence problem) under IE7 Browser, setting the vertical alignment is not valid when the 4px gap problem and the minimum height problem coexist under Li
"Fix" to Li Plus float
<! DOCTYPE html>
"3" (li 3px void bug) ie7-under the browser Li has a height or width or zoom:1, and only contains inline elements, and the inline element is set to Display:block,li 3px more vertical spacing
"Resolving" haslayout that trigger the neutron element of Li
<! DOCTYPE html>
Floating bug
"1" (3pxbug) when floating and non-floating elements are adjacent to the Ie6-browser, a space of 3px pixels will appear.
Solution
[1] using Csshack, set the margin value of the -3px in the opposite direction to the floating element, set the margin for the corresponding direction of the non-floating element to 0 (plus IE6 prefix)
[2] Remove the margin value of the non-floating element, plus float.
<! DOCTYPE html>
"2" ie6-after the parent element floats, and the child elements set the height, if the parent element does not set the width, the width will fill the entire line
Solution
[1] Setting the width of the floating parent element
[2] setting width for child elements
[3] Setting a float for a child element
<! DOCTYPE html>
"3" (floating folding line) under Ie7-Browser, if two elements a right float, one does not float. Floating elements are folded to the next line
Solution
[1] Add float to non-floating elements
[2] The right floating element is first placed in HTML
<! DOCTYPE html>
"4" (two-sided bug) ie6-browser the next block element is floating, and has a horizontal margin value. If there is only left margin, the left margin of the leftmost floating block element is magnified to twice times. If there is only right margin, the right margin of the rightmost floating block element is magnified to twice times. Left margin and right margin on the far right are magnified twice times.
"Resolve" to set the Block element display:inline
<! DOCTYPE html>
"5" (Margin-bottombug) in the Ie7-browser under the width of the parent and the width of each line element is more than 3px, or if there is a case of dissatisfaction, the last line of the Margin-bottom invalidation
"Solve" try not to use Margin-bottom, and use Margin-top instead
<! DOCTYPE html>
"6" (text overflow bug) ie6-Two floating elements under the browser (floating element cannot be Li) a left float no width, the other right floating width and the parent width is not more than 3px, the floating element has comments or inline elements, the text is copied
Solution
[1] Remove the comment
[2] Turning inline elements into block elements
[3] Inline elements and annotations throughout with <div> wrap up
<! DOCTYPE html>
Locating bugs
"1" in ie7-browser the child element has a relative position, the parent's overflow is invalid
"Resolve" also sets relative positioning for the parent
<! DOCTYPE html>
"2" in the ie6-browser floating element and absolute positioning element is a side relationship, and the floating element set Margin-left and width and exactly equal to the width of the parent element, when the absolute positioning element disappears
"Fix" gives the positioned element a div outside the package
<! DOCTYPE html>
"3" When the width of the parent element of an absolutely positioned element in the Ie6-browser is odd, the right of the element will have a 1px deviation and the bottom of the element will have a 1px deviation when the height is odd.
<! DOCTYPE html>
Form Bug
"1" ie6-browser the label tag only supports the For property, does not support only the <input> notation
Resolve uses the For property
<! DOCTYPE html>
"2" (input void problem) when the input element is surrounded by a div, the Ie6-browser will have more than 1px of space between them, while IE7, 8 browsers will have more than 1px of space between them.
"Resolve" to add float to input
<! DOCTYPE html>
"3" ie6-browser when the input element is surrounded by a div, setting Border:none does not get the desired effect when the input is set to float
Solution
[1] Setting border:0
[2] Resetting the background of input
<! DOCTYPE html>
"4" ie7-input type form controls such as <textarea>, <input> input text, the background image scrolls along with the text
"Resolution" adds the background to the parent and clear its background
<! DOCTYPE html>
The select control in the "5" ie6-browser cannot be overridden by <div> because the select control is at the top level in IE6.
The "resolve" IFRAME is higher than the select priority, nests the IFRAME inside <div> and is set to invisible
<! DOCTYPE html>
Common CSS compatibility issues under IE browser