complete styles for cross browser CSS zoom

后端 未结 5 1013
小鲜肉
小鲜肉 2020-11-28 04:54

I am finding it hard to get fully cross browser CSS zoom properties ..what I\'ve is only these

zoom: 2;
-moz-transform: scale(2);
5条回答
  •  南笙
    南笙 (楼主)
    2020-11-28 05:42

    These will be sufficient for cross browser...

    Demo

    Note: As @martin pointed out that this may not work as intended, doesn't mean this fails, Chrome just makes it 2x larger than other browsers, because it RESPECTS zoom property as well. So it makes it 2x larger...

    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

    BlahBlah

    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 */
    }
    

提交回复
热议问题