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!
No comments:
Post a Comment