HTML&CSS Compatibility Summary

Sort the compatibility notes you've met today:

Browser not compatible	Summary of issues	Problem description	Workaround
Ie6,ie7	3px	The first element on the left side of a row is not floating, the second element is left floating, There will be a 3-pixel gap between the two elements	and the element in a row is floating if there is an element floating
Ie6,ie7	Down line	The element on the left side of a row is not floating, the right element is floating, and the right floating element is folded downward.	and the element in a row is floating if there is an element floating
IE6	Bilateral distance	Block attribute label floating with horizontal margin value, horizontal margin doubled	Block element Add Display:inline
Ie6,ie7	Li	Li does not float, Li interior elements are floating, Li will be more than 3px of space around	Add Vertical-align:top to Li or add floating to Li
IE6	Min. height	Min. height not less than 19px	Set Overflow:hidden to get height set
IE6	Min. height +li	When the minimum height problem coexists with the gap problem with Li	You can only add floats to Li and add Overflow:hidden
Ie6,ie7	Picture gap	There's a gap in the picture	Add a vertical-align to a picture
IE6	Margin disappears	When the sum of the width of a row of child elements is greater than 3px, or if there is a state of discontent, the bottom margin of the last line of the child element is invalidated under IE6	Try to avoid the situation
IE6	Text overflow	When the width of the child element differs from the parent's width by less than 3px, there are comments or inline element literals in the middle of the two floating elements that somehow make a few more	Wrap a comment or inline element with a div.
IE6	Floating and absolute positioning	When the floating element and the absolute positioning element are side-by-side relations, the absolute positioning element disappears under IE6.	Set the absolute positioning element to a div, or add a zoom:1; trigger layout
IE6	Fiexd	Fixed positioning position:fiexd not supported;	Need to be compatible with JS calculation scrolling size
IE6	Overflow	Parent's Overflow:hidden; The relative of the child is not covered;	Add relative to Parent
IE6	1px	The position element's parent width is odd, so both right and bottom of the positioned element have a deviation of 1 pixels.	Try to avoid changing the situation
Ie6,ie7	Form height	Table cell select/option drop-down box is incompatible with support for height	Height is not usually set
Ie6,ie7	TextArea	The default scroll bars under each browser are not compatible	Add Overflow:auto;
Ie6,ie7	TextArea	CSS3 added resize to adjust the dimension properties;	Resize:none, cannot freely drag to change the size,
IE6	Input background scrolling	Input background moves as content grows	Add a div,div on the outside of input to set the background, or to its parent, input is all transparent
IE6	Open Parent Width	The child width, if it exceeds the parent width, will open the parent width, while the other browsers will not open the parent width	It needs to be calculated accurately.
IE6	Fiexd	Fixed positioning position:fiexd not supported;	Need to be compatible with JS calculation scrolling size
IE6	Overflow	Parent's Overflow:hidden; The relative of the child is not covered;	Add relative to Parent
IE6	1px	The position element's parent width is odd, so both right and bottom of the positioned element have a deviation of 1 pixels.	Try to avoid changing the situation
Ie6,ie7	Form height	Table cell select/option drop-down box is incompatible with support for height	Height is not usually set
Ie6,ie7	TextArea	The default scroll bars under each browser are not compatible	Add Overflow:auto;
Ie6,ie7	TextArea	CSS3 added resize to adjust the dimension properties;	Resize:none, cannot freely drag to change the size,
IE6	Input background scrolling	Input background moves as content grows	Add a div,div on the outside of input to set the background, or to its parent, input is all transparent
IE6	Open Parent Width	The child width, if it exceeds the parent width, will open the parent width, while the other browsers will not open the parent width	It needs to be calculated accurately.
IE6	Subset Width Full Parent	The parent element floats, and if a subset element width is required to be stretched, the subset elements inside the block are floated, otherwise the subset element will stretch to the width of the parent setting
IE6	Dotted	1px dotted not supported under IE6	Cut Picture Background tile
IE6	Margin disappears	When the parent has a border, the margin value of the child element disappears	Haslayout that triggers the parent
IE6	Margin transfer	Sometimes the margin value of a child is passed to the parent	Haslayout that triggers the parent
Ie6,ie7	Form background	If TR has a background at thead or TBODY, the background of thead and tbody disappears	Try to avoid
Ie6,ie7	Input border	The form control of the input type is border:none and invalid, and there will still be a border.	Reset the background of input
IE6	PNG Translucent	PNG translucent images do not work under IE6	Solution: Use the dedicated IE6 JS plugin Dd_belatedpng_0.0.8a.js
		PNG translucent images can be dropped from the top left corner of the page	Add relative positioning position:relative at its parent;
		PNG Translucent background image try not to deal with the background image of mouse move, there will be flashing situation,	The PNG translucent background is set before moving in, but the position needs to be moved out of the label, and when the mouse is moved in, the background image is moved back to its original location.
IE6	！ Important	In! Important the same style in the back, it will destroy the function of!important, will follow the default priority order to walk.	Try to avoid

HTML&CSS Compatibility Summary