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
YesbugsIn IE7, if there is an HTML comment between the siblings, the adjacent sibling selector will be invalid.
Common Sibling Selector Exampleh1~p {color: #f00;}
DescribeThe 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 hoverA:hover span {color: #0f0;}
DescribeAn 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 examplea:first-child:hover {color: #0f0;}
DescribePseudo-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 Examplediv:hover {color: #f00;}
Describe:hover
Pseudo-classes can be applied to the hover state of any element, not just a tag.
Support situationIE6
NoIE7
YesIE8
Yes:first-child pseudo-class exampleDiv li:first-child {background:blue;}
DescribeThe Pseudo-class locates the first child element of the parent element of each specified element.
Support situationIE6
NoIE7
YesIE8
YesbugsIn 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 exampleA:focus {border:1px solid red;}
DescribeThe 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";}
DescribeThese 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;}
DescribeThe 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;}
DescribeThese 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;}
DescribeThese 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;}
DescribeA 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;}
Describeposition
This 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;}
Describebackground-attachment
The value of the property is fixed to allow a background picture to be absolutely positioned relative to the window.
Support situationIE6
NoIE7
YesIE8
YesbugsLike 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;}
DescribeApplies a value inherit
to an attribute that allows an element to inherit the computed value from its containing element.
Support situationIE6
NoIE7
NoIE8
YesbugsIE6 and IE7 do not support inherit
values except direction
and visibility
attributes.
Example of a blank border of a table cellTable td {BORDER-SPACING:3PX;}
DescribeThis property sets the space between the borders of adjacent table cells.
Support situationIE6
NoIE7
NoIE8
Yes render empty cell example in tableTable {empty-cells:show;}
DescribeThis 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 headerTable {Caption-side:bottom;}
DescribeThis 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)}
DescribeThis property specifies that one area of a box is visible, the rest is trimmed off, or not visible.
Support situationIE6
NoIE7
NoIE8
YesbugsInterestingly, 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 pagesp {orphans:4;} p {widows:4;}
Describeorphans
property 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;}
DescribeThis property sets whether the paging occurs within a specified element.
Support situationIE6
NoIE7
NoIE8
Yesoutline Property Example#box {outline:solid 1px red;}
Describeoutline
Yes 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;}
Describedisplay
property 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 situation
IE6No
IE7No
IE8Yes handling collapsible whitespace example
p {white-space:pre-line;} div {white-space:pre-wrap;}
Describe
white-space
The Pre-line value setting for a property collapses multiple blank elements into a single blank, allowing explicit set-up to break. white-space
the value of the property pre-wrap
does not collapse multiple whitespace into one, but it also allows for explicit setting of a break.
Support situation
IE6No
IE7No
IE8Yes 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 situation
IE6No
IE7No
IE8Yesbugs
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 situation
IE6No
IE7No
IE8Yes 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 situation
IE6No
IE7No
IE8Yes 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.
height
Performance is similar tomin-height
width
Performance is similar tomin-width
- Double left and right margin
- Dot border (dotted) looks like a dashed border (dashed)
text-decoration
line-through
value 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-type
all 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-type
all 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