Defeat IE's Sunflower treasure: CSS Bug Table

Source: Internet
Author: User


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 about it.

Today, while trying to perfect the company's internal style framework, the ie CSS Bug went through. Finishing the harvest a lot of things, some official shortcomings, but also according to their knowledge upgrade a bit. Of course, it was nice to upgrade some of the framework's content. Then, some worth to see the bug into a list, based on the Alipay front-end great sharing spirit, shared out for the team workers and members of the reference.

At the same time, due to the haste, some understanding and expression of improper and other flaws are unavoidable, but also ask you to help correct. Thank you.

problem 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 Haslayout labels have a high Ie6/7 Bug | Fixed *height:0;
4 Form>[haslayout] element has margin-left, [input | textarea] in the child element appears 2xmargin-left 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 Position:absolute element, a display:block, only text clickable when not: hover Ie6/7 Bug | Fixed Add background to A, if the background is transparent, using background:url (' file link already cached on any page '), Background:url (#) [Official workaround] is not recommended 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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.