CSS differences in IE6, IE7, and IE8////////////////z

Source: Internet
Author: User
Tags border color html comment unsupported

The difference between CSS in IE6, IE7, and IE8 one of the most bizarre statistical results about browsers is that internet Explorer versions 6,7 and 8 coexist. As of this article, each version of Internet Explorer occupies a total of approximately 65% of the market share. In the website development community, this number is much smaller, statistics show about 40%.


The interesting part of these statistics is that the values between IE6, IE7, and IE8 are very close, which prevents a single Microsoft browser from dominating--contrary to what was previously the case. Based on these unfortunate statistical results, it is necessary for developers to thoroughly test all currently used IE browsers when developing a website for their clients, and to recruit more users on individual projects.

Thanks to those JavaScript libraries (frameworks), cross-browser JavaScript testing has been as close to perfection as the current situation allows. However, in CSS development is not so, especially related to the existing three versions of IE.

This article attempts to provide a detailed, easy-to-use reference for different developers who want to learn about CSS's support for IE6, IE7, and IE8. This reference contains an overview and compatibility of the following situations:

    • one support in three browsers while the other two unsupported entries
    • two support in three browsers and another unsupported entry

This article does not discuss:

    • Three browsers do not support the entry
    • Private properties

Therefore, the center of this article is different from the three browsers, rather than the necessary support flaws. The list is divided into the following five sections:

    • Selectors and inheritance
    • Pseudo-class and pseudo-elements
    • Property Support
    • Various other technologies
    • Important Bug and incompatibility issues
Selector and inherited sub-selectors example
Body > P {color: #fff;}
Describe

The child selector selects all the immediate child elements of a particular parent element, in the example above, the body parent element, which p is the child element.

Support situation IE6
No IE7
Yes IE8
Yesbugs

In IE7, if there is an HTML comment between the parent label and the child label, the child selector will not work.

Chain Class Example
. class1.class2.class3 {background: #fff;}
Describe

A chain class is used to send an HTML element with multiple class declarations, as in this case:

<div class= "Class1 class2 class3" ><p>content here.</p></div>
Support situation IE6
No IE7
Yes IE8
Yesbugs

IE6 seems to support this situation because it matches the last class in the chain to the element that uses that class, however, it does not restrict a single element that uses all classes in the chain.

Property Selector Example
A[HREF] {color: #0f0;}
Describe

The selector allows an element to be positioned as long as it has a specified property. In the example above, all a tags with an href attribute are qualified, and a tag without an HREF attribute is not qualified.

Support situation IE6
No IE7
Yes IE8
Yes near Brother Selector example
h1+p {color: #f00;}
Describe

The selector locates the sibling label that is adjacent to the specified element. The above example will qualify the P tag, but he must be the brother of the H1 tag and be followed directly behind the H1 tag. Like what:

In the above code, the CSS style will be valid only for the first p. Because it is H1 's brother and closely follows the H1. The second p is also a brother of H1, but it does not follow the H1.

Support situationIE6
NoIE7
YesIE8
Yesbugs

In IE7, if there is an HTML comment between the siblings, the adjacent sibling selector will be invalid.

Common Sibling Selector Example
h1~p {color: #f00;}
Describe

The selector locates all sibling elements that follow a specified element. Applying this selector to the example above will be valid for two P tags. Of course, if a P element appears before H1, that P element will not be matched.

Support situationIE6
NoIE7
YesIE8
Yes pseudo-class and pseudo-element: Descendant selector example after hover
A:hover span {color: #0f0;}
Describe

An element can be positioned as a selector after the hover pseudo-class, just like a descendant selector. The above example will change the color of the text in the span element within the a element when the mouse hovers over it.

Support situationIE6
NoIE7
YesIE8
Yes chain Pseudo-class example
a:first-child:hover {color: #0f0;}
Describe

Pseudo-classes can be chained together to narrow down the selection of elements. The above example locates the first a tag under each parent element and applies the hover pseudo-class p to it.

Support situationIE6
NoIE7
YesIE8
Yes non-anchor element: hover Example
div:hover {color: #f00;}
Describe

:hoverPseudo-classes can be applied to the hover state of any element, not just a tag.

Support situationIE6
NoIE7
YesIE8
Yes:first-child pseudo-class example
Div li:first-child {background:blue;}
Describe

The Pseudo-class locates the first child element of the parent element of each specified element.

Support situationIE6
NoIE7
YesIE8
Yesbugs

In IE7, if there is an HTML comment before the first child element to be positioned, the first-child pseudo-class will be invalid.

: Focus pseudo-class example
A:focus {border:1px solid red;}
Describe

The pseudo-class locates all elements that have keyboard focus.

Support situationIE6
NoIE7
NoIE8
Yes:before and: After Pseudo-class example
#box: Before {content: "This paragraph text is in front of the box";} #box: After {content: "This paragraph text is behind the box";}
Describe

These pseudo-elements add the resulting content, in combination with the content property, before and after the specified element, respectively.

Support situationIE6
NoIE7
NoIE8
The Yes property supports an example of the actual size produced by position
#box {position:absolute;top:0;right:100px;left:0;bottom:200px;background:blue;}
Describe

The definition,, top right bottom , and left value to an absolutely positioned element will give the element the actual size (width and height), although it is not set to make the width and height values.

Support situationIE6
NoIE7
YesIE8
Yesmin-height and Min-width examples
#box {min-height:500px;min-width:300px;}
Describe

These two properties specify the minimum value of the width and height of the element, allowing a box to be larger than the specified minimum, but not smaller. Both of them can be used together, or they can be separated.

Support situationIE6
NoIE7
YesIE8
Yesmax-height and Max-width examples
#box {max-height:500px;max-width:300px;}
Describe

These two properties specify the maximum height and width of the element, allowing a box to be smaller than the maximum value specified, but not larger. They can also be used at the same time or separately.

Support situationIE6
NoIE7
YesIE8
Yes transparent border Color example
#box {border:solid 1px transparent;}
Describe

A transparent border color allows a border and border color to be visible (or opaque) while occupying the same space.

Support situationIE6
NoIE7
YesIE8
Yes fixed position element example
#box {position:fixed;}
Describe

positionThis value of the property allows an element to be absolutely positioned relative to the window.

Support situationIE6
NoIE7
YesIE8
Yes fixed position Background chart example
#box {background-image:url (images/bg.jpg); background-position:0 0;background-attachment:fixed;}
Describe

background-attachmentThe value of the property is fixed to allow a background picture to be absolutely positioned relative to the window.

Support situationIE6
NoIE7
YesIE8
Yesbugs

Like Position:fixed, IE6 also does not support the fixed value of Background-positon. However, IE6 only works when the value is used for the root element.

Property value "Inherit" example
#box {Display:inherit;}
Describe

Applies a value inherit to an attribute that allows an element to inherit the computed value from its containing element.

Support situationIE6
NoIE7
NoIE8
Yesbugs

IE6 and IE7 do not support inherit values except direction and visibility attributes.

Example of a blank border of a table cell
Table td {BORDER-SPACING:3PX;}
Describe

This property sets the space between the borders of adjacent table cells.

Support situationIE6
NoIE7
NoIE8
Yes render empty cell example in table
Table {empty-cells:show;}
Describe

This property, applied only to elements of the display property, is set to Table-cell elements, allowing empty cells to render their borders and backgrounds. Otherwise, they will not be visible.

Support situationIE6
NoIE7
NoIE8
Yes horizontal position example of table header
Table {Caption-side:bottom;}
Describe

This property allows the title of a table to be placed at the bottom of the table-the default is the head.

Support situationIE6
NoIE7
NoIE8
Yes Trim Area Example
#box {clip:rect (20px, 300px, 200px, 100px)}
Describe

This property specifies that one area of a box is visible, the rest is trimmed off, or not visible.

Support situationIE6
NoIE7
NoIE8
Yesbugs

Interestingly, if you do not use commas separating the values, IE6 and IE7 can also use this property. (for example, use a space to separate the clipped values.) )

Examples of orphanes and widows in printed pages
p {orphans:4;} p {widows:4;}
Describe

orphansproperty sets the minimum number of rows to display at the bottom of the printed page. The widows property is used to set the number of lines of the paragraph that is displayed at least at the head of the print page.

Support situationIE6
NoIE7
NoIE8
Example of page splitting within Yes box
#box {page-break-inside:avoid;}
Describe

This property sets whether the paging occurs within a specified element.

Support situationIE6
NoIE7
NoIE8
Yesoutline Property Example
#box {outline:solid 1px red;}
Describe

outlineYes outline-style , outline-width , and outline-color the abbreviation. This property is better than the border property because it does not affect the flow of the document, so U is more helpful in debugging layout problems.

Support situationIE6
NoIE7
NoIE8
Example of an alternative value for the Yesdisplay property
#box {display:inline-block;}
Describe

displayproperty is typically set to block , inline ,, or none . Alternative values include:

    • inline-block
    • list-item
    • run-in
    • table
    • table-caption
    • table-cell
    • table-column
    • table-column-group
    • table-footer-group
    • table-header-group
    • table-row
    • table-row-group
Support situationIE6
NoIE7
NoIE8
Yes handling collapsible whitespace example
p {white-space:pre-line;} div {white-space:pre-wrap;}
Describe

white-spaceThe Pre-line value setting for a property collapses multiple blank elements into a single blank, allowing explicit set-up to break. white-spacethe value of the property pre-wrap does not collapse multiple whitespace into one, but it also allows for explicit setting of a break.

Support situationIE6
NoIE7
NoIE8
Yes other various technologies @import examples of media types
@import url ("styles.css") screen;
Describe

As in the example above, the media type of the introduced style sheet file is declared behind the file address. In this example, the media type is "screen".

Support situationIE6
NoIE7
NoIE8
Yesbugs

Although IE6 and IE7 support @import , they will not work when the media type is specified, or even cause the positive @import rule to be invalid.

Count Increment Example
h2 {counter-increment:headers;} H2:before {content:counter (Headers) ".";}
Describe

This CSS technique allows you to automatically increment the number that appears in front of the specified element, combined with the before pseudo-element.

Recommended reading: CSS content, Counter-increment and Counter-reset

Support situationIE6
NoIE7
NoIE8
Yes to generate a reference word for Content Descriptor example
Q {quotes: "'" "'";} Q:before {content:open-quote;} Q:after {content:close-quote;}
Describe

Specifies the reference call sign used to generate the content for the Q tag.

Support situationIE6
NoIE7
NoIE8
Yes important bug and incompatibility issues

The following are a number of bugs in IE6 and IE7 that are not mentioned above. Of course, this list does not include entries that are not supported in these three browsers.

IE6 Bugs
  • Setting elements with styles is not supported <abbr>
  • Class and ID names beginning with hyphens and underscores are not supported
  • <select>Elements always appear on top of the stack, ignoring z-index values
  • 如果锚点的伪类没有使用正确的顺序( :link , :visited , :hover ) ,:hover the Pseudo-class will not be valid
  • The declaration of a property !important is overridden by the second declaration of the same attribute in the same rule that does not use!important.
  • heightPerformance is similar tomin-height
  • widthPerformance is similar tomin-width
  • Double left and right margin
  • Dot border (dotted) looks like a dashed border (dashed)
  • text-decorationline-throughvalue looks higher in text than other browsers
  • If there is a fixed structure (Haslayout is true, you cannot set the value of the active haslayout such as the height/width of the Li/zoom), the sequence number will not increase, but remain at 1
  • list-style-typeall available values not supported by the list element
  • If the list entry floats, the specified list-style-image will not be displayed
  • Not fully supported@font-face
  • Some selectors incorrectly match comments and document declarations
  • If an ID selector does not match a class selector, the same ID selector combined with a different class selector will also be treated as a mismatch.
IE7 Bugs
    • If there is a fixed structure (Haslayout is true, you cannot set the value of the active haslayout such as the height/width of the Li/zoom), the sequence number will not increase, but remain at 1
    • list-style-typeall available values not supported by the list element
    • If the list entry floats, the specified list-style-image will not be displayed
    • Not fully supported@font-face
    • Some selectors incorrectly match comments and document declarations

CSS differences in IE6, IE7, and IE8////////////////z

Related Article

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: info-contact@alibabacloud.com 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.