CSS Hacks for Google Chrome

Since Google Chrome is a Webkit based browser, we can target it’s screen rendering the same way we handle Safari.

While 90% of the time you will not need to hack around to fix a site for Chrome/Safari (if you are indeed developing with standards in mind) there are always exceptions.

The one problem I seem to have is when floating multiple elements in a singe div. There seems to be a 1px margin jog between Firefox and Opera/Safari/Chrome.

In order to target Webkit based browsers, we can use the CSS3 selector for the pseudo-class first-of-type.

Since we will only be employing one body element, we set first-of-type onto the document’s body and then combine it with whichever element we wish to target.

For example:

body:first-of-type #navigation { margin-top:-1px; }

Jeffrey Olchovy is a Web developer, designer and marketing strategist.