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!