Test Summary of 44 types of ie css bug instances

Web Front-end, we can understand it as a browser. In this sense, the daily work of developers is closely related to browsers;

The question we want to discuss today is about the alternative in browsers (which developers think of)-some bugs in CSS interpretation and rendering by IE, and solutions for these bugs.

Of course, you will say that the CSS bug of IE is not enough to solve the haslayout attribute. You are a little underestimating IE's "capabilities". In the following example, some bugs are caused by the haslayout attribute, but not all.

The following 44 bug and solution examples are translated from a foreigner's blog post (in fact, this blog address has been in my favorites for almost a year, the reason why I took the time to translate it is also because of the N problems that have occurred in recent projects. I can find them here; as a matter of fact, I saw someone translating the bug list on douding network earlier (only a simple translation of the Bug list, but not an instance). I want to test the instance by myself, I still have a great advantage for myself and want to share it with me.

Note:

1. The following CSS bug about ie exists until I specified the test date (roar .. No one knows about the future );
2. The bug solution is valid before I specify the test date.
3. To view the bug, click the link related to the bug name. To view the solution, click go ";

(If you think it is better to see English, please click here to view the original (http://haslayout.net/css)Instance list>

General Internet Explorer CSSBugs

Bug name	Affected Versions	Solution	Bug description
> The IMG label in the label Label cannot be focused on the form element.	IE8, IE7, IE6	Go	When the IMG label is included in the label Label and the IMG label is clicked, the selected form Element event cannot be triggered.
> The button element is not automatically centered.	IE8	Gogo2	Button and input elements such as: TYPE = submit, type = button, type = reset and so on. When the application {display: block; margin-left: auto; margin: auto ;} attribute does not work.
> Incorrect floating Layout	IE7, IE6	Go	When N consecutive floating elements have the clear attribute, an incorrect layout is displayed (the width is not adaptive)
> Page rolling bug	IE7, IE6	Go	Very weird overflow, look at the code
> Continuous Floating element bug	IE7, IE6	Go	In a Continuous Floating element, the last and last 2nd elements are left White.
> Continuous Floating elements repeat the bug of the last element.	IE7, IE6	Go	In a Continuous Floating element, the last element is repeated.
> An empty tag has a height value.	IE7, IE6	Go	An empty tag with the layout attribute has a height value.
> Double margin values of form elements	IE7, IE6	Go	The margin value of the input textarea element in the horizontal direction inherits the margin and "layout" of the parent element"
> The border dotted property value is equivalent to the dashed property value IE7.	IE7	Go	When the {1px dotted} attribute is applied to an edge of an element and the width of at least one side is greater than 1px, dotted will display the dashed effect.
> The relative Attribute Overflow is invalid.	IE7, IE6	Go	When the position of a child element is set to relative, the overflow attribute values of the parent element, den, and auto, are invalid.
> IE7 "broken": hover absolute bug	IE7	Go	When the position of a child element is set to relative, the overflow attribute values of the parent element, den, and auto, are invalid.
> Button background shift on: active bug	IE8	Go	: Active background offset when applied to the button input type = "Submit" label: active background offset: Up or down
> Invisible hover border bug	IE8	Go	When hover is used, the outline attribute is set for the border hidden element. When: hover is used, the bottom border is not displayed at all or 1px less;
> Percentage padding margin bug	IE8	Go	Set the margin value in the vertical direction of the element. The parent element sets the padding value as the percentage, and the parent element sets the border or padding attribute as the parent. The generated bug is shown as follows:
> Fixed bug in floating list of images	IE8	Go	If a floating image in the list is marked with an incorrect position or is not displayed at all
> The th tag does not inherit the text-align attribute bug.	IE8	Go	Th element does not inherit the value of text-align from its parent element.
> 32 style restrictions	IE8, IE7, IE6	Go	When the number of style labels on the page is greater than or equal to 32, all the 32nd and later styles will be ignored (of course, including the style table of @ import)
> The hover State ignores the white background bug.	IE7	Go	: The background will not change during hover.
> IE7 sub-Selector annotation bug	IE7	Go	The selector with a sub-selector is ignored after the annotation;
> Use * HTML bug	IE6	Go	* The HTML selector IE6 is recognizable.
> IE6 ignore! Important bug	IE6	Go	When we add a CSS rule! When the important keyword is used, IE6 cannot be identified;
> The PNG background does not match the background color.	IE8, IE7, IE6	Go	Apply the PNG background image and background color to the element. The color of the PNG image is the same as that of the background color, but the IE performance is incorrect.
> If the margin value is auto, it cannot be centered temporarily and is called a pseudo bug.	IE8, IE7, IE6	Go	You cannot center a block-level element when the margin value is set to auto.
>: First-line! Important rules are useless	IE8	Go	When the application: first-line pseudo class, and has! The impant ant rule is that it cannot be displayed normally in IE8.
>: First-letter ignores bugs.	IE6	Go	This bug is caused by an interesting reason;
> Incomplete click bug	IE7, IE6	Go	Element A can only be clicked where there is text, and the hover effect only appears when you move the mouse over the text.
> Tiered bug of floating Elements	IE7, IE6	Go	Floating elements are arranged together like stairs
> List background disappearance bug	IE6	Go	The Li, DT, and DD element background is not displayed.
> NoScript tag background and border bug	IE8, IE7, IE6	Go	The NoScript element only appears when the browser disables the script, but not all of it appears in the IE browser;
> The Transparent area cannot be clicked.	IE8, IE7, IE6	Go	When a PNG image is used as the background, the transparent area of the tag cannot be clicked;
> List location offset bug	IE8	Go	In IE8, we can see the list and Mark offset down.
> No bug is added for the number of ol lists.	IE7, IE6	Go	In IE6 7, we cannot see an increase in the number of ol lists, which is always 1 and will not change.
> UL and ol list number and symbol hiding bug	IE7, IE6	Go	In IE6 7, we cannot see the ol and UL lists and icons;
> The image cannot be vertically centered.	IE7, IE6	Go	The line-height method cannot be used for the element to vertically center the internal image;
> The background image is not displayed.	IE8, IE7, IE6	Go	When the background attribute is applied, the background image is not displayed in IE.
> Custom mouse bug	IE8, IE7, IE6	Go	The custom mouse is not displayed in IE
> Background overflow bug	IE6	Go	The background color overflows from an element to an element adjacent to it.
> Highly expanded bug	IE6	Gogo	The height of the element itself is greater than the height defined for it (the height value is small)
> Bug in extended width	IE6	Go	The height of an element is greater than the width defined for it (in English)
> Bilateral distance bug	IE6	Go	Floating elements generate double left and right margins
> Negative margin bug	IE7, IE6	Go	When the element defines the negative margin, the excess part of the parent element will be hidden;
> Italic floating bug	IE6	Go	When the floating element font is italic, its adjacent floating elements will be squeezed down;
> 3px gap bug	IE6	Go	The adjacent elements of the floating element may have a gap of 3 px, or move down the position.
> Text-align bug	IE7, IE6	Go	The text-align attribute affects block-level elements.

Original address: http://ued.iciba.com /? P = 401 & cpage = 1