CSS Differences in Internet Explorer 6, 7 and 8

One of the most bizarre sta­tis­ti­cal facts in rela­tion to browser use has to be the vir­tual wide­spread num­bers that cur­rently exist in the use of Inter­net Explorer ver­sions 6, 7 and 8. As of this writ­ing, Inter­net Explorer holds about a 65% mar­ket share com­bined across all their cur­rently used browsers. In the web devel­op­ment com­mu­nity, this num­ber is much lower, show­ing about a 40% share.

The inter­est­ing part of those sta­tis­tics is that the num­bers across IE6, IE7, and IE8 are very close, pre­vent­ing a sin­gle Microsoft browser from dom­i­nat­ing browser stats — con­trary to what has been the trend in the past. Due to these unfor­tu­nate sta­tis­tics, it is imper­a­tive that devel­op­ers do thor­ough test­ing in all currently-used Inter­net Explorer browsers when work­ing on web­sites for clients, and on per­sonal projects that tar­get a broader audience.

Thanks to the many avail­able JavaScript libraries, JavaScript test­ing across dif­fer­ent browsers has become as close to per­fect as the cur­rent sit­u­a­tion will allow. But this is not true in CSS devel­op­ment, par­tic­u­larly in rela­tion to the three cur­rently used ver­sions of Inter­net Explorer.

This arti­cle will attempt to pro­vide an exhaus­tive, easy-to-use ref­er­ence for devel­op­ers desir­ing to know the dif­fer­ences in CSS sup­port for IE6, IE7 and IE8. This ref­er­ence con­tains brief descrip­tions and com­pat­i­bil­ity for:

• Any item that is sup­ported by one of the three browser ver­sions, but not the other two
• Any item that is sup­ported by two of the three browser ver­sions, but not the other one

This arti­cle does not discuss:

• Any item that is not sup­ported by any of the three browser versions
• Pro­pri­etary or vendor-specific CSS

There­fore, the focus is on dif­fer­ences in the three, not nec­es­sar­ily lack of sup­port. The list is divided into five sections:

• Selec­tors & Inheritance
• Pseudo-Classes and Pseudo-Elements
• Prop­erty Support
• Other Mis­cel­la­neous Techniques
• Sig­nif­i­cant Bugs and Incompatibilities

Selec­tors & Inheritance

Child Selec­tors

Exam­ple

body>p {
	color: #fff;
}

Descrip­tion

The child selec­tor selects all ele­ments that are imme­di­ate chil­dren of a spec­i­fied par­ent ele­ment. In the exam­ple above, body is the par­ent, and p is the child.

Sup­port

Bugs

In IE7, the child selec­tor will not work if there is an HTML com­ment between the par­ent item and the child.

Chained Classes

Exam­ple

.class1.class2.class3 {
	background: #fff;
}

Descrip­tion

Chained classes are used when the same HTML ele­ment has mul­ti­ple classes declared, like this:

<div>
<p>Content here.</p>
</div>

Sup­port

Bugs

IE6 appears to sup­port this prop­erty, because it matches the last class in the chain to an ele­ment hav­ing that class, how­ever, it does not restrict the class to an ele­ment that has all the classes in the chain, like it should.

Attribute Selec­tors

Exam­ple

a[href] {
	color: #0f0;
}

Descrip­tion

This selec­tor allows an ele­ment to be tar­geted only if it has the spec­i­fied attribute. In the exam­ple above, all anchor tags that have href attrib­utes would qual­ify, but not anchor tags that did not have href attributes.

Sup­port

Adja­cent Sib­ling Selectors

Exam­ple

h1+p {
	color: #f00;
}

Descrip­tion

This selec­tor tar­gets sib­lings that are adja­cent to the spec­i­fied ele­ment. The exam­ple above would tar­get all para­graph tags that are sib­lings of, and come directly after, pri­mary head­ing tags. For example:

<h1>heading</h1>
<p>Content here.</p>
<p>Content here.</p>

In the code above, the CSS styles spec­i­fied would tar­get only the first para­graph, because it is a sib­ling to the <h1> tag and is adja­cent. The sec­ond para­graph is a sib­ling, but is not adjacent.

Sup­port

Bugs

In IE7, the adja­cent sib­ling selec­tor will not work if there is an HTML com­ment between the siblings.

Gen­eral Sib­ling Selectors

Exam­ple

h1~p {
	color: #f00;
}

Descrip­tion

This selec­tor tar­gets all sib­lings that appear after a spec­i­fied ele­ment. Apply­ing this selec­tor to the HTML exam­ple given in the pre­vi­ous sec­tion will select both para­graph tags, how­ever, if one of the para­graphs appeared before the head­ing, that para­graph would not be targeted.

Sup­port

Pseudo-Classes and Pseudo-Elements

Descen­dant Selec­tor After :hover Pseudo-Class

Exam­ple

a:hover span {
	color: #0f0;
}

Descrip­tion

An ele­ment can be tar­geted with a selec­tor after a :hover pseudo class, sim­i­lar to how any descen­dant selec­tor works. The above exam­ple would change the font color inside all <span> ele­ments inside of anchor ele­ments while the anchor is hov­ered over.

Sup­port

Chained Pseudo-Classes

Exam­ple

a:first-child:hover {
	color: #0f0;
}

Descrip­tion

Pseudo-classes can be chained to nar­row ele­ment selec­tion. The above exam­ple would tar­get every anchor tag that is the first child of its par­ent and apply a hover class to it.

Sup­port

:hover on Non-Anchor Elements

Exam­ple

div:hover {
	color: #f00;
}

Descrip­tion

The :hover pseudo-class can apply a hover, or rollover state, to any ele­ment, not just anchor tags.

Sup­port

:first-child Pseudo-Class

Exam­ple

div li:first-child {
	background: blue;
}

Descrip­tion

This pseudo-class tar­gets each spec­i­fied ele­ment that is the first child of its parent.

Sup­port

Bugs

In IE7, the first-child pseudo-class will not work if an HTML com­ment appears before the tar­geted first child element.

:focus Pseudo-Class

Exam­ple

a:focus {
	border: solid 1px red;
}

Descrip­tion

This pseudo-class tar­gets any ele­ment that has key­board focus.

Sup­port

:before and :after Pseudo-Elements

Exam­ple

#box:before {
	content: "This text is before the box";
}

#box:after {
	content: "This text is after the box";
}

Descrip­tion

This pseudo-element places gen­er­ated con­tent before or after the spec­i­fied ele­ment, used in con­junc­tion with the content property.

Sup­port

Prop­erty Support

Vir­tual Dimen­sions Deter­mined by Position

Exam­ple

#box {
	position: absolute;
	top: 0;
	right: 100px;
	left: 0;
	bottom: 200px;
	background: blue;
}

Descrip­tion

Spec­i­fy­ing top, right, bottom, and left val­ues for an absolutely posi­tioned ele­ment will give the ele­ment “vir­tual” dimen­sions (width and height), even if width and height are not specified.

Sup­port

Min-Height & Min-Width

Exam­ple

#box {
	min-height: 500px;
	min-width: 300px;
}

Descrip­tion

These prop­er­ties spec­ify min­i­mum val­ues for either height or width, allow­ing a box to be larger, but not smaller, than the spec­i­fied min­i­mum val­ues. They can be used together or individually.

Sup­port

Max-Height & Max-Width

Exam­ple

#box {
	max-height: 500px;
	max-width: 300px;
}

Descrip­tion

These prop­er­ties spec­ify max­i­mum val­ues for either height or width, allow­ing a box to be smaller, but not larger, than the spec­i­fied min­i­mum val­ues. They can be used together or individually.

Sup­port

Trans­par­ent Bor­der Color

Exam­ple

#box {
	border: solid 1px transparent;
}

Descrip­tion

A trans­par­ent bor­der color allows a bor­der to occupy the same space as would be occu­pied if the bor­der was vis­i­ble, or opaque.

Sup­port

Fixed-Position Ele­ments

Exam­ple

#box {
	position: fixed;
}

Descrip­tion

This value for the position prop­erty allows an ele­ment to be posi­tioned absolutely rel­a­tive to the viewport.

Sup­port

Fixed-Position Back­ground Rel­a­tive to Viewport

Exam­ple

#box {
	background-image: url(images/bg.jpg);
	background-position: 0 0;
	background-attachment: fixed;
}

Descrip­tion

A fixed value for the background-attachment prop­erty allows a back­ground image to be posi­tioned absolutely rel­a­tive to the viewport.

Sup­port

Bugs

IE6 incor­rectly fixes the back­ground image in rela­tion to the con­tain­ing par­ent of the ele­ment that has the back­ground set, there­fore this value only works in IE6 when its used on the root element.

Prop­erty Value “inherit”

Exam­ple

#box {
	display: inherit;
}

Descrip­tion

Apply­ing the value inherit to a prop­erty allows an ele­ment to inherit the com­puted value for that prop­erty from its con­tain­ing element.

Sup­port

Bugs

IE6 and IE7 do not sup­port the value inherit except when applied to the direction and visibility properties.

Bor­der Spac­ing on Table Cells

Exam­ple

table td {
	border-spacing: 3px;
}

Descrip­tion

This prop­erty sets the spac­ing between the bor­ders of adja­cent table cells.

Sup­port

Ren­der­ing of Empty Cells in Tables

Exam­ple

table {
	empty-cells: show;
}

Descrip­tion

This prop­erty, which only applies to ele­ments that have their display prop­erty set to table-cell, allows empty cells to be ren­dered with their bor­ders and back­grounds, or else hidden.

Sup­port

Ver­ti­cal Posi­tion of a Table Caption

Exam­ple

table {
	caption-side: bottom;
}

Descrip­tion

This prop­erty allows a table cap­tion to appear at the bot­tom of a table, instead at the top, which is the default.

Sup­port

Clip­ping Regions

Exam­ple

#box {
	rect(20px, 300px, 200px, 100px)
}

Descrip­tion

This prop­erty spec­i­fies an area of a box that is vis­i­ble, mak­ing the rest “clipped”, or invisible.

Sup­port

Bugs

Inter­est­ingly, this prop­erty works in IE6 and IE7 if the dep­re­cated comma-less syn­tax is used (i.e. white­space between the clip­ping val­ues instead of commas)

Orphaned and Wid­owed Text in Printed Pages

Exam­ple

p {
	orphans: 4;
}

p {
	widows: 4;
}

Descrip­tion

The orphans prop­erty spec­i­fies the min­i­mum num­ber of lines to dis­play at the bot­tom of a printed page. The widows prop­erty spec­i­fies the min­i­mum num­ber of lines to dis­play at the top of a printed page.

Sup­port

Page Breaks Inside Boxes

Exam­ple

#box {
	page-break-inside: avoid;
}

Descrip­tion

This prop­erty spec­i­fies whether a page break should occur inside of a spec­i­fied ele­ment or not.

Sup­port

Out­line Properties

Exam­ple

#box {
	outline: solid 1px red;
}

Descrip­tion

outline is the short­hand prop­erty that encom­passes outline-style, outline-width, and outline-color. This prop­erty is prefer­able to the border prop­erty since it does not affect doc­u­ment flow, thus bet­ter aid­ing debug­ging of lay­out issues.

Sup­port

Alter­na­tive Val­ues for the Dis­play Property

Exam­ple

#box {
	display: inline-block;
}

Descrip­tion

The display prop­erty is usu­ally set to block, inline, or none. Alter­na­tive val­ues include:

• inline-block
• inline-table
• 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

Sup­port

Han­dling of Col­lapsi­ble Whitespace

Exam­ple

p {
	white-space: pre-line;
}

div {
	white-space: pre-wrap;
}

Descrip­tion

The pre-line value for the white-space prop­erty spec­i­fies that mul­ti­ple white­space ele­ments col­lapse into a sin­gle space, while allow­ing explic­itly set line breaks. The pre-wrap value for the white-space prop­erty spec­i­fies that mul­ti­ple white­space ele­ments do not col­lapse into a sin­gle space, while allow­ing explic­itly set line breaks.

Sup­port

Other Mis­cel­la­neous Techniques

Media Types for @import

Exam­ple

@import url("styles.css") screen;

Descrip­tion

A media type for an imported style sheet is declared after the loca­tion of the style sheet, as in the exam­ple above. In this exam­ple, the media type is “screen”.

Sup­port

Bugs

Although IE6 and IE7 sup­port @import, they fail when a media type is spec­i­fied, caus­ing the entire @import rule to be ignored.

Incre­ment­ing of Counter Values

Exam­ple

h2 {
	counter-increment: headers;
}

h2:before {
	content: counter(headers) ". ";
}

Descrip­tion

This CSS tech­nique allows auto-incrementing num­bers to appear before spec­i­fied ele­ments, and is used in con­junc­tion with the before pseudo-element.

Sup­port

Quote Char­ac­ters for Gen­er­ated Content

Exam­ple

q {
	quotes: "'" "'";
}

q:before {
	content: open-quote;
}

q:after {
	content: close-quote;
}

Descrip­tion

Spec­i­fies the quote char­ac­ters to use for gen­er­ated con­tent applied to the q (quo­ta­tion) tag.

Sup­port

Sig­nif­i­cant Bugs and Incompatibilities

Fol­low­ing is a brief descrip­tion of var­i­ous bugs that occur in IE6 and IE7 that are not described or alluded to above. This list does not include items that lack sup­port in all three browsers.

IE6 Bugs

• Doesn’t sup­port styling of the <abbr> element
• Doesn’t sup­port classes and IDs that begin with a hyphen or underscore
• <select> ele­ments always appear at the top of the stack, unaf­fected by z-index values
• :hover pseudo-class val­ues are ignored if anchor pseudo-classes are not in the cor­rect order (:link, :visited, :hover)
• An !important dec­la­ra­tion on a prop­erty is over­rid­den by a 2nd dec­la­ra­tion of the same prop­erty in the same rule set that doesn’t use !important
• height behaves like min-height
• width behaves like min-width
• Left and right mar­gins are dou­bled on floated ele­ments that touch their par­ents’ side edges
• Dot­ted bor­ders appear iden­ti­cal to dashed borders
• line-through value for text-decoration prop­erty appears higher on the text than on other browsers
• List items for an ordered list that have a lay­out will not incre­ment their num­bers, leav­ing all list items pre­ceded by the num­ber “1″
• List items don’t sup­port all pos­si­ble val­ues for list-style-type
• List items with a spec­i­fied list-style-image will not dis­play the image if they are floated
• Offers only par­tial sup­port for @font-face
• Some selec­tors will wrongly match com­ments and the doc­type declaration
• If an ID selec­tor com­bined with a class selec­tor is unmatched, the same ID selec­tor com­bined with dif­fer­ent class selec­tors will also be treated as unmatched

IE7 Bugs

• List items for an ordered list that have a lay­out will not incre­ment their num­bers, leav­ing all list items pre­ceded by the num­ber “1″
• List items don’t sup­port all pos­si­ble val­ues for list-style-type
• List items with a spec­i­fied list-style-image will not dis­play the image if they are floated
• Offers only par­tial sup­port for @font-face
• Some selec­tors will wrongly match com­ments and the doc­type declaration

Some IE bugs not men­tioned here occur only under par­tic­u­lar cir­cum­stances, and are not spe­cific to one par­tic­u­lar CSS prop­erty or value. See the ref­er­ences below for some of those addi­tional issues.

Fur­ther Resources

• Details of Changes in Inter­net Explorer 8
• CSS Com­pat­i­bil­ity for Inter­net Explorer (MSDN)
• CSS Improve­ments in Inter­net Explorer 8 (MSDN)
• Inter­net Explorer Exposed – CSS Bugs @ Posi­tion Is Everything
• Site­Point CSS Reference
• CSS Con­tents and Browser Compatibility
• 10 Use­ful CSS Prop­er­ties Not Sup­ported By Inter­net Explorer

About the Author

Louis Lazaris is a writer and free­lance Web Devel­oper based in Toronto, Canada. He has 9 years of expe­ri­ence in the web devel­op­ment indus­try and posts web design arti­cles and tuto­ri­als on his blog, Impres­sive Webs. You can fol­low Louis on Twit­ter or con­tact him using this form.