[Beat IE's Sunflower Treasure Book] Bug Analysis and solution reference manual for CSS in IE

As a front end, what we usually want to do is to make the page display well on the browser of each system A-grade browser, even the website browsing share more than 0.1%. Of course, there are performance issues. Today, however, the compatibility of styles is a problem. In the Ie/mozilla/webkit/opera four points of the world today, Ie6-9/mozilla (Gecko) series/chrome/safari/opera etc. The compatibility of these browsers all make the front end headache. And in this, the most annoying when the number of IE, especially IE6. IE6, the basic will be able to dominate half of the country. The deal with IE, also equivalent to occupy 7, 80% of the territory. Do you want to be a dominant page-compatible master? Anyway, I was thinking.

 	question	browser	demo	workaround
Hacking Rules:   PROPERTY:ALL-IE\9; property:gte-ie8\0;*property:lte-ie7; + Property:ie7; _property:ie6;
1	Input[button | submit] cannot use margin:0 auto; Center	IE8	Bug | Fixed	Add width to input
2	Body{overflow:hidden;} No scroll bar removed	Ie6/7	Bug | Fixed	Set Html{overflow:hidden;}
3	ie6/7	bug | fixed	*height:0; _overflow:hidden;
4	IE6/7	bug | fixed	form > [haslayout element]{margin-left: width;} form div{*margin-left: Width ÷2;}
5	When the Border-width has 1 < side 3 is set to dotted, 1px side dotted display as dashed	IE7	Bug | Fixed	Do not use a different width dotted on the same element
6	When the child element has position:relative, the parent element setting Overflow:[hidden|auto] is equivalent to setting the position:visible for the child element;	Ie6/7	Bug | Fixed	Sets the position:relative for the parent element;
7	: hover pseudo-class cannot change the Left/top value of a position:absolute child element	IE7	Bug | Fixed	Set the value of Top/left to all hundred points except 0%, or add a margin-[all directions] except 0 for all values, including 0%
8	: Focus + Selector {} selector fails	IE8	Bug | Fixed	Add an empty selector after the expiration selector: focus{}
9	Chaotic floating in the list: When a picture is floating in lists, the picture appears to overflow the normal position; no List-style	IE8	Bug | Fixed	Replace List-style with background image
10	Th does not automatically inherit the text-align of the ancestor element	IE8	Bug | Fixed	Add Text-align:inherit to th;
11	Styles, including link/style/@import (link), are allowed to be a maximum of: 32	Ie6-8	-Common sense	99.99% of cases, you will not encounter
12	: hover if Background-color is #fff, failure	IE7	Bug | Fixed	Change the background-color into a background. Or, non-#fff | | #ffffff
13	Ignore ' > ' post-Annotated selector:selector>/**/selector{}	IE7	Bug | Fixed	Official Demo Error
14	* HTML	IE6	─hack	Only valid for IE6
15	The values of the colors and background colors in the PNG picture are the same, but show different	Ie6-7	Bug | Fixed	Use Pngcrush to remove Gamma profiles from a picture
16	margin:0 Auto; Block elements cannot be centered horizontally	Ie6-8	Bug | Fixed	Add a width to the block element
17	Using pseudo-class: First-line | : First-letter,!important in the value of the property invalidates the property	IE8	Bug | Fixed	!important is evil, and don ' t use it anymore
18	: First-letter Failure	IE6	Bug | Fixed	Move: First-letter to nearest {}, such as H1, p:first-letter{}, not P:first-letter h1{}
19	IE6/7	bug | fixed	add background to a, if the background is transparent, use Background:url (' cached file link on any page '), Background:url (#) is not recommended [official workaround] because an HTTP request will be added
20	Float list element not horizontally aligned: Li does not set float,a setting display:block;float:[direction],li not horizontally aligned	Ie6/7	Bug | Fixed	Set Display:inline or float:[direction for Li]
21st	DT, DD, Li background failure	IE6	Bug | Fixed	DT, DD, li{position:relative;}
22	<noscript the style of the/> element displays the style in JavaScript-enabled scenarios	Ie6-8	Bug | Fixed	Use JS to add Display:none to <noscript/>;
23	Transparent part of a transparent background image processed with filter is not available.	Ie6-8	Bug | Fixed	Turn Background:none into Background:url (' link '), link to itself and any file outside of the picture
24	Li inner element deviates from baseline downward pull	IE8	Bug | Fixed	Set Display:inline or float:[direction for Li]
25	The list-style of Li in the list does not appear	Ie6/7	Bug | Fixed	Add Margin-left to Li, leave room for display (do not add to UL)
26	Picture cannot be centered vertically	Ie6/7	Bug/fixed	Add an empty label and assign it to "Layout", such as Display:inline-block;
27	Cannot customize pointer styles	Ie6-8	Bug | Fixed	To set an absolute path to a pointer file
28	Background overflow, display normal after dragging scroll bar	IE6	Bug | Fixed	Add Overflow:hidden to the parent element to prevent overflow and give haslayout, if added _zoom:1;
29	Higher than the height definition	IE6	Bug/fixed	Add _overflow:hidden; (recommended) or _font-size:0;
30	Width is greater than widths defined	IE6	Bug/fixed	Add _overflow:hidden;
31	Double margins	IE6	-Common sense	Add Display:inline to float element
32	Margin negative hidden: non-haslayout elements within the parent element of the haslayout, when negative margins are used, are not visible outside the parent element part	Ie6/7	Bug/fixed	Remove the haslayout of the parent element, or assign haslayout to the child element and add position:relative;
33	Set the text of one of the two floating elements to italic, and the other to the bottom of the italic text element.	IE6	Bug/fixed	Add Overflow:hidden to elements with italic text;
35	3PX interval: The element after the float element, there will be a 3px interval	IE6	Bug/fixed	Because it is the exact 3px, so, with "brute force", such as _margin-left:-3px;
35	Text-align affects block-level elements	Ie6/7	Bug/fixed	Organize your float, or set text-align separately

[Beat IE's Sunflower Treasure Book] Bug Analysis and solution reference manual for CSS in IE