IE browser compatibility problem solution
1. CSS common problems
1. H5 tag compatibility
解决方案：<script src="http://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
2. After the element is floated, if the width can be set, add a width to the element. If the width needs to be stretched by the content, add a floating float:left to the block element inside it;
3. The first block of elements floats, and the margin-left value of the second block of elements is equal to the width of the first block of elements. There will be gaps in IE6.
Solution: Don't use margin-left, add float:left; to both elements
4. In IE6, if the child element exceeds the width and height of the parent, it will stretch the width and height of the parent. For example, the width of the ul used to place the carousel will exceed the parent element.
Solution: Don't let the width and height of the child element exceed the parent
5. P contains block element nesting rules
Remember the rules: p, h tags cannot nest block elements
2. CSS compatibility issues
1. Margin compatibility issues
1) Margin-top is passed, and the upper and lower margins of child elements will be passed to the parent
Block: trigger BFC (such as overflow:hidden; save standard browsers and IE78), trigger IE's haslayout zoom: 1 (save IE67);
2) The upper and lower margins are superimposed (trigger condition: elements of the same level, the bottom of the first element and the top of the second element will be superimposed together)
Solution: Set margins separately for two elements, and then try to use margins in the same direction, such as margin-top
2. display:inline-block; block elements become inline blocks, IE67 is not compatible; inline elements become inline blocks, all browsers support
Solution: {display:inline-block; *display:inline; *zoom:1;}
Problem found: Of course, after changing to an inline block, there is a feature that if the element wraps, there will be a gap between the elements on the page, and the gap size is the pixel size of a space.
3. The minimum height of IE6 elements is 19px
Solution: overflow:hidden;
4, IE67 double margin, when the element floats, and then set the margin, then double margin will be generated
Solution: For IE67, add the *display:inline; style, such as several groups of blocks arranged horizontally on the page, you will often encounter
5. The elements in the li are all floating, and there will be a 4px gap problem under IE67
Solution: For IE67, add *vertical-align:top; style
6. Under IE6, there are comments or inline elements between two floating elements and the width difference from the parent is no more than 3px, which will cause some text problems to be copied.
Solution: 1) Avoid inline elements or comments between two floating elements
2) 3px or more from the parent width
7. The overflow:hidden of the parent element of IE67; after the child element is set to position:relative, the child element cannot be covered
Solution: For IE67, add position:relative; to the parent element
8. Under IE6, the parent width and height of absolute positioning elements are odd, and the right and bottom values of absolute positioning elements will have a deviation of 1px
Solution: Avoid odd parent widths
9. Absolutely positioned elements and floating elements side by side under IE6, absolute positioned elements disappear
Solution: If the floating element and the absolute positioning element are at the same level, the positioning element will disappear. This bug can be avoided as long as they are not at the same level.
10. Input gap under IE6
Solution: For IE67, add *float:left; to the input element