Compatibility issue--html+css

What are the compatibility issues? 1, IE6 under the strange box model

　　　Standard box model: total width =width+padding+border

Weird box model : Total width =width

2, IE6 under the minimum height problem

IE6 Lower block element height less than 19px, will be treated as 19px

workaround :

1, overflow:hidden recommended

2, font-size:0;

3, IE6 does not support 1px point line

IE6 does not support a one-pixel dot dash, instead of a background map

4, IE6 content will be the height of the parent Open

IE6 content will open the height of the parent

Solutions

overflow:hidden;

5, IE6 only support to add pseudo-Class A tag

IE6 does not support pseudo-classes other than a label

6, IE6,7 does not support the block label plus Display:inline-block

IE67 does not support block elements Display:inline-block

7, IE8 and IE8 previous browsers are not supported opacity

IE8 and IE8 Previous browsers do not support opacity

Solutions

with the filter

8, IE6 does not support fixed positioning

IE6 does not support fixed positioning, you can use JS to solve

9, IE6 the front element floating, after the elements do not float, there will be a gap between them

IE6 the front element floats, after the elements do not float, there will be gaps between them

Solutions

add floating to the back element

10, IE6 under the bilateral distance problem

IE6 the next block element has a float, and has transverse margin (left or right), the final distance is twice times the original

Workaround

adding display:inline to elements; 　　

11, IE67 under the parent has a border, the child has margin words will not work

Under IE67, the parent has a border, the child has a margin, and the child's margin does not work

Solutions

trigger the layout of the parent

12, IE6, the width of each line element and the width of the parent is more than 2px, the last line of the Margin-bottom will be invalidated (IE7 no matter how much difference, direct failure)

IE6, the width of each line element differs from the parent's width by more than 2px, and the last line of the Margin-bottom is invalidated

IE7, no matter how wide the width difference, direct failure

Workaround : 　　

solve with padding

13, IE6 the element in addition to the text, there are inline-block type elements, the element row height will be invalidated

Under IE6, the element has a Inline-block type element in addition to the text, and the line height of the element is invalidated.

Workaround: wrap each separately, set the row height separately .

14, IE6 under the text overflow problem

Under IE6, two floating elements have comments or empty inline labels, the parent width and the child element width is less than 3px, the text inside the element will be copied out

Solutions

1. Wrap the annotation or inline elements in a div

3. Add 3px to the width of the parent

15, Ie67li gap problem

IE67, Li has left and right floating elements, will cause each Li below the gap problem

Solutions

1, to Li plus vertical-align:middle;

2, to Li floating

16, IE67 has relative positioning, and larger than the parent. The Father Overflow:hidden, and the latter cannot wrap it.

The IE67 is relatively positioned and larger than the parent level. The Father Overflow:hidden, and the latter cannot wrap it.

Solutions

also relative positioning for parent

17, IE6 under the same level of floating elements will cover the absolute positioning elements

IE6 the same level of floating elements will cover the absolute positioning elements

Solutions 　　

nesting a layer outside of a positioned element 　　

18, IE6 under the positioning of the parent's width is odd, the element's right value or bottom value will have a 1px deviation

Under IE6, if the width of the parent is odd, the right value of the element or the bottom value will be offset by 1px.

19, IE6 through margin negative value, so that the element moved out of the parent position, then the part will be cut off

IE6 a negative value through margin, so that the element is removed from the parent's position, the part that goes out is truncated

Workaround 　　

Add relative positioning to the element, or to the parent Overflow:hidden;

20, IE67 under the input type of form control, the upper and lower sides have 1px gap

IE67 input type of form control with 1px gap between the upper and lower sides

Solutions

To add a float to a control

21, IE8 and IE8 not recognized before H5 label

Workaround: Do not use

22, IE6 does not support PNG transparent picture

IE6 does not support png-24 transparent images

Compatibility issue--html+css