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!