IE7 css hack

CSS Hacks, Tricks and Proprietary Extensions

Below is a list of CSS hacks that can be used to filter out different browsers in cases when standard CSS does not work or the conditional comments of IE cannot be applied.

Internet Explorer 6

* html .elementOrClassName
{
	property: value;
}
.elementOrClassName
{
	_property: value;
}

Internet Explorer 7

* + html .elementOrClassName
{
	property: value;
}

Internet Explorer 8 in Standards Compliance Mode

.elementOrClassName
{
	property /*\**/: value\9;

}

\9 is required and the number cannot be different. I suppose that this has something to do with regular expressions.

All versions of Internet Explorer

.elementOrClassName
{
	property: value\9;
}

\9 is required and the number cannot be different. I suppose that this has something to do with regular expressions.

Turn on Image Scaling and Resampling in Internet Explorer

Funny enough, but unlike other browsers, Internet Explorer comes with bicubic interpolation mode turned off, and this is why sometimes images look frayed without an obvious reason. To fix this, you can use the following:

img
{
	-ms-interpolation-mode: bicubic;
}

Turn on CSS background-image caching in IE6

To avoid flicker of elements with background images when hovered, you may use the Microsoft-proprietary BackgroundImageCache Exec Command, for example:

$(document).ready(function()
{
 if(window.attachEvent)
 {
  document.execCommand("BackgroundImageCache", false, true);
 }
});

Emulate border-color: transparent in Internet Explorer 6

IE6 does not support border-color: transparent, here’s how this can be emulated. First you need to set some exotic border-color value (named or hex), then hide it with the chroma CSS filter of Internet Explorer. Of course you need to use the star hack for IE6:

* html .elementOrClassName
{
	border-color: pink;
	filter: chroma(color=pink);
}

Goolge Chrome and Apple Safari

@media screen and (-webkit-min-device-pixel-ratio:0)
{
	.elementOrClassName
	{
		property: value;
	}
}

Mozilla FireFox

@-moz-document url-prefix()
{
 .elementOrClassName
 {
  property: value;
 }
}

Tantek Celik’s Box Model Hack for Internet Explorer 5

Rarely used today, but still useful if you care about the wrong box model of IE5.

Opera 7x – 9x

This one should be used very carefully, as it targets older versions of Opera (circa 2005-2007) with CSS properties that already implemented in WebKit browsers.

@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0)
{
	head~body .elementOrClassName
	{
		property: value;
	}
}

Proprietary CSS extensions

Below is a list of vendor-specific CSS extensions, which are valid CSS according to W3C.

Opera (prefixed with -o-)

Mozilla FireFox (prefixed with -moz-)

Internet Explorer 8 and greater (prefixed with -ms-)

WebKit Browsers – Google Chrome, Apple Safari, etc (prefixed with -webkit- or -khtml-)

10 Dirty CSS Tips and Tricks

Here is a collection of 10 CSS tips, tricks in blogposts I have written during the last year that you may find useful:

01. Better Image Scaling and Resampling in Internet Explorer
02. Setting Opacity and Other Filters in Internet Explorer 8
03. The 32 External CSS Files Limitation of Internet Explorer and More
04. Unobtrusive CSS Loading Indicator for Images
05. CSS: Filtering and Distinguishing Google Chrome and Safari
06. Controlling the CSS Opacity Rate of Child Elements in Transparent Parents in Internet Explorer
07. $style – Get Any CSS Property Value of an Object
08. Emulating border-color: transparent in Internet Explorer 6
09. An Exotic CSS Hack for Internet Explorer
10. CSS Watermark
11. Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

Visit http://acidmartin.wemakesites.net – the home of Acid.JS – The AJAX Tools and Widgets Library

An Exotic CSS Hack for Internet Explorer

Here is a less known and rather exotic CSS hack, visible for Internet Explorer based on a rendering bug. Unfortunately, it is visible both in versions 6 and 7, but still it can be useful as a last resort for styling.

And here it comes:

h1
{
 color: green;
.color: red;
}

Internet Explorer 6 and 7 will render <h1>...</h1> in red, while all other browsers will disregard the dot-prefixed property.