Scaling for IE/Chrome/Firefox/Safari

I want a scaling that works for all above browsers. I end up with two separate style sheets, one for IE, and one for the rest browsers. And I did something like this:

This is sample text before scale

This is sample text after scale

<div class="myclass">This is sample text</div>
<style type="text/css">
.myclass {
    width: 100%;
    background: #ECECEC;
    font: bold 24px Arial;
}
</style>

<!--[if IE]>
<style type="text/css">
.myclass {
    zoom: 0.6;
}
</style>
<![endif]-->

<!--[if !IE]>-->
<style type="text/css">
.myclass {
    -moz-transform: scale(0.6);
    -webkit-transform: scale(0.6);
}
</style>
<!--<![endif]-->

The css 'zoom' would work for IE and Safari. 'zoom' scales element to the top left of element, and '-moz-transform' and '-webkit-transform' scales to the center. The 'position' property could be further adjusted in browser specific styles so that all browsers display the element at exactly same position after scale!

Conditional comments

Conditional comments only work for IE, but it can be used for deciding whether the browser is IE or not, and include browser specific style sheets.

<!--[if IE]>
do something for IE
<![endif]-->
<!--[if !IE]>-->
do something for other browsers
<!--<![endif]-->

Reference: http://www.quirksmode.org/css/condcom.html

Chrome minimum font size

I find my chrome failed to display my css font size settings. I learned that chrome has a default minimum font size setting, and the solution is to add below syntax:

-webkit-text-size-adjust:none;