Internet Explorer and CSS Compatibility Issues

Cascading Style Sheets, more commonly known as CSS, is used to denote the look as well as the formatting of a document, written in markup languages like HTML and others. However the most commonly used browser, i.e. Internet Explorer hasn't been all that happy about CSS properties and has constantly faced compatibility problems with it. Microsoft, the father of Internet Explorer has often been criticized for ignoring some of the most useful and important CSS properties, which could have made the web experience on IE very unique and special. Some of the common compatibility issues between IE and CSS are listed below.

Outline

The outline property offered by CSS, has been very useful in determining the source of the problem or error in the web coding program. This property enables one to put border around the block level elements, which are at fault. However neither Internet Explorer 6 nor 7 supports the CSS Outline property.

Empty-Cells

One of the most common CSS properties like Empty Cells is also not supported on the Internet Explorer. The Empty Cell Property applies to those elements that have their display in table-cell format. In such cases, while undertaking the dynamic repopulating of a table, if you don't want to display the borders, background color, or background image on the empty cell, you can remove them by using Use empty-cells: hide.

Clip Property

Another simple and commonly known CSS property is the Clip. The Clip Property, allows the programmer to point out the invisible areas in an element. The common syntax of Clip looks like: div.clipped { padding: 20px; width: 400px; height: 400px; clip: rect(20px, 300px, 200px, 100px); position: absolute; }
However, neither Internet Explorer 6 nor its upgraded version7 supports this property.

Display

Thanks to the compatibility issues between IE and CSS, only one of the three values i.e. Inline, Block and None is used by programmers in designing a webpage. Apart from the usual properties, Display can also be modified with values like inline-block, table, inline-table, and table-cell, which can be pretty handy in resolving the specific layout issues.

Caption-Side

The Caption Side Property of the CSS enables the programmer to determine on what side of a table, the table's caption would appear. The commonly accepted values for this property are listed as top, bottom, left and right. However, neither IE 6 nor 7 accept this property, and therefore the caption will always appear on the top of the table.

The ones listed above are some of the most common compatibility issues between IE and CSS, an in-depth analysis can reveal many other issues.