完整的跨浏览器CSS缩放样式

Question

我发现很难完全跨浏览器CSS缩放属性..我只是这些

zoom: 2;
-moz-transform: scale(2);

Answer 1

这些对于跨浏览器来说已足够了......

演示

注意:正如@martin指出这可能无法按预期工作,并不意味着失败,Chrome只比其他浏览器大2倍,因为它也是RESPECTS zoom属性.所以它使它大2倍......

zoom: 2; /* IE */
-moz-transform: scale(2); /* Firefox */
-moz-transform-origin: 0 0;
-o-transform: scale(2); /* Opera */
-o-transform-origin: 0 0;
-webkit-transform: scale(2); /* Safari And Chrome */
-webkit-transform-origin: 0 0;
transform: scale(2); /* Standard Property */
transform-origin: 0 0;  /* Standard Property */

HTML

<div class="zoom">BlahBlah</div>

CSS

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(2);
    -webkit-transform-origin: 0 0;
    transform: scale(2); /* Standard Property */
    transform-origin: 0 0;  /* Standard Property */
}