css中的zoom的使用

zoom : normal | number
normal :　 默認值。使用對象的實際尺寸
number :　 百分數 | 無符號浮點實數。浮點實數值為1.0或百分數為100%時相當于此屬性的 normal 值用白話講解就是zoom:后面的數字即放大的倍數，可 以是數值，也可以是百分比。如：zoom:1，zoom:120%。

ps：網上都說是ie的專有屬性，本人親測chrome下也可以使用；（Firefox瀏覽器不支持）

實例一：

.first-p{ 
 width: 100px; 
 height: 100px; 
 background: red; 
 zoom:1; 
 float: left 
 } 
 .second-p{ 
 width: 100px; 
 height: 100px; 
 background: green; 
 zoom:1.5; 
 float:left 
 } 
 .third-p{ 
 width: 100px; 
 height: 100px; 
 background: blue; 
 zoom:2; 
 float:left 
 }

html

 <p class="first-p"></p> 
 <p class="second-p"></p> 
 <p class="third-p"></p>

效果：

ps：p本身的大小是100，結果被放大了，和css3中的縮放有有較的卻別之一：放大 縮小多少倍，就占據多大的dom空間；

css中的縮放，占據的依然是元素本身設置的width 和 height 屬性滴呀

使用方式：比如觸發ie的hasLayout屬性，清除浮動、清除margin的重疊等。

{:;:;:;:;

 
 }{:;:;:;:; 
 }

上面的做法已經能解決現代瀏覽器上的問題了；如要要向下兼容ie6 就要加上zoom:1。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com