IE CSS Bugs

Web page Production WEBJX article introduction: CSS bug summary in IE browser.

The most annoying when the number of IE, especially IE6. IE6, the basic will be able to dominate half of the Jiangshan. With IE, it also occupies 7, 80% of the territory. Do you want to be a dominant page compatible with the Lord? Anyway, I was thinking.

As a front end, what we usually do is to make the page display well on the browsers of each system A-grade and even the Web browsing share of 0.1%. Of course, there are also performance issues. However, today is about the compatibility of styles. Ie/mozilla/webkit/opera Four in the world today, Ie6-9/mozilla (Gecko) series/chrome/safari/opera etc. The compatibility of these browsers makes the front end headache. And in this, the most people headache when the number of IE, especially IE6. IE6, the basic will be able to dominate half of the Jiangshan. With IE, it also occupies 7, 80% of the territory. Do you want to be a dominant page compatible with the Lord? Anyway, I was thinking.

Today, while trying to improve the company's internal style framework, the haslayout.net ie CSS bug over again. Finishing the harvest a lot of things, some of the official deficiencies, but also according to their knowledge to upgrade a bit. Of course, it was nice to upgrade some of the elements of the framework smoothly. Then, it will be worth to see the bugs sorted into a list, based on the Alipay front of the great spirit of sharing, to share out for the team and colleagues to reference.

At the same time, due to the rush to organize, some understanding and inappropriate expression and other flaws are unavoidable, but also ask you to help correct. Thank you.

	problem	browser	DEMO	Solution
Hacking Rules: property:all-ie\9; Property:gte-ie8\0;*property:lte-ie7; +property:ie7; _property:ie6;
1	Input[button Submit] can not use margin:0 auto; Center	IE8	Bugs fixed	Add width to input
2	Body{overflow:hidden;} No scroll bar removed	Ie6/7	Bugs fixed	Set Html{overflow:hidden;}
3	Haslayout label has a high	Ie6/7	Bugs fixed	*height:0; _overflow:hidden;
4	When the form>[haslayout] element has margin-left, the [input textarea] in the child element appears 2xmargin-left	Ie6/7	Bugs fixed	form > [haslayout element]{margin-left: width;} Form div{*margin-left: Width ÷2;}
5	When the border-width is set to dotted when there are 1 < edges 3, the side dotted of the 1px is displayed as dashed	IE7	Bugs fixed	Do not use different widths of dotted on the same element
6	When the child element has position:relative, the parent element setting Overflow:[hiddenauto] is equivalent to setting the position:visible for the child element;	Ie6/7	Bugs fixed	Sets the position:relative for the parent element;
7	: The hover pseudo class cannot change the left/top value of a child element with Position:absolute	IE7	Bugs fixed	Set the value of the 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 invalid	IE8	Bugs fixed	Add an empty selector after the expiration selector: focus{}
9	Messy float in the list: The picture appears to overflow in the normal position when floating in the list; no list-style.	IE8	Bugs fixed	Replace List-style with a background picture
10	Th does not automatically inherit the text-align of the ancestor element	IE8	Bugs fixed	Add Text-align:inherit to th;
11	The styles, including link/style/@import (link), are allowed up to 32	Ie6-8	-Common sense	99.99% of the case, will not encounter
12	: hover when Background-color as #fff, failure	IE7	Bugs fixed	Change the background-color into background. Or, not #fff #ffffff
13	Ignore ' > ' with annotation selector:selector>/**/selector{}	IE7	Bugs fixed	Official demo wrong
14	* HTML	IE6	─hack	Valid only for IE6
15	The values for the colors in the PNG picture are the same as the background colors, but they show different	Ie6-7	Bugs fixed	Use pngcrush to remove Gamma profiles from a picture
16	margin:0 Auto; Cannot have the block element horizontally centered	Ie6-8	Bugs fixed	Add a width to the block element
17	Using pseudo class: First-line:first-letter, the presence of!important in the value of a property invalidates the property	IE8	Bugs fixed	!important is evil, don ' t use it anymore
18	: First-letter Failure	IE6	Bugs fixed	To move: First-letter to places closest to {}, such as H1, p:first-letter{}, rather than P:first-letter h1{}
19	Position:absolute element, a display:block, only text clickable when not: hover	Ie6/7	Bugs fixed	Add background to A, if the background is transparent, use Background:url (' Any cached file link in any page '), do not recommend Background:url (#) [ official solution ], because it will increase the HTTP request
20	Float list elements are not horizontally aligned: Li does not set the Float,a to set display:block;float:[orientation],li not horizontal alignment	Ie6/7	Bugs fixed	Set Display:inline or float:[direction for Li]
21st	DT, DD, Li background failure	IE6	Bugs fixed	DT, DD, li{position:relative;}
22	The style of the <noscript/> element shows the style when JavaScript is enabled	Ie6-8	Bugs fixed	Use JS to add Display:none to <noscript/>;
23	Transparent part of transparent background picture with filter processing not point	Ie6-8	Bugs fixed	Turn Background:none into Background:url (' link '), linking to itself and to any file outside of the picture
24	Li inside element deviates baseline downward pull	IE8	Bugs fixed	Set Display:inline or float:[direction for Li]
25	The list-style of Li in the list does not show	Ie6/7	Bugs fixed	Add Margin-left to Li, leave space to show (do not add in UL)
26	Picture cannot be centered vertically	Ie6/7	Bug/fixed	Add an empty tag and assign it to "Layout", such as Display:inline-block;
27	Cannot customize pointer style	Ie6-8	Bugs fixed	Set absolute path to pointer file
28	Background overflow, drag scroll bar to show normal	IE6	Bugs fixed	Add Overflow:hidden to the parent element to prevent overflow and give haslayout if added _zoom:1;
29	Height is above high definition	IE6	Bug/fixed	Add _overflow:hidden; (recommended) or _font-size:0;
30	Width is wider than definition	IE6	Bug/fixed	Add _overflow:hidden;
31	Double margin	IE6	-Common sense	Add Display:inline to float element
32	Margin negative value hidden: a haslayout element within the parent element of a haslayout that is not visible when a negative margin is used, beyond 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	The text for one of the two floating elements is italic, and the other element is pulled below the italic text element.	IE6	Bug/fixed	Add Overflow:hidden to elements with italic text;
35	3px interval: element after float element, there will be 3px interval	IE6	Bug/fixed	Because it is the exact 3px, so use "brute force crack", such as _margin-left:-3px;
35	Text-align affects block-level elements	Ie6/7	Bug/fixed	Organize your float; or set text-align separately.