Google了一下發現了這東西是IE專用的CSS屬性用途在此做個紀錄，以防日後忘記。
在排版面的時候我們很常使用的一個情境是用一個div作為container去包含其它的div
例如:
<style>
.container{
border: 8px solid #F00;
width: 900px;
}
.box {
width: 100px;
height: 200px;
}
.first {
background: #0f0;
}
.second{
background: #00f;
}
</style>
<div class="container">
<div class="box first"></div>
<div class="box second"></div>
</div>
若是我們要把box並排我們基本上有幾種作法：
1. 用 display
2. 用 float
如果要用display我們只要在 .box 加一個 display:inline-block; 的屬性即可
但是.....IE7以下不支援!
若是我們改用float只要在 .box 加一個 float:left; 的屬性即可
但是....這時候你就會發現只有IE7正常....其它的都不正常
除了 IE7 之外的畫面
這時IE7卻是好的 XD
解決這方法就是在 .container 加一個屬性 overflow:auto;即可
這時候幾乎所有的瀏覽器都可以用了
除了......IE6.....
所以這時候就是 zoom 這個屬性出馬的時候了
只要在 .container 裡面加一個 zoom:1; 的屬性就可以了
雖然IE6基本上已經沒有在使用了!
但因為好奇所以去找了一下這屬性的作用瞭解了CSS的奧秘也挺不錯的
zoom是IE5.5開始支援的CSS屬性
其實它還有放大倍率的功效....只是放大倍率好像跟調整版面沒有太大關係就是....
我們只是利用zoom:1這特性來解決在IE6的排版問題 XD
以下是zoom屬性在各瀏覽器支援(參考資料:http://css-tricks.com/almanac/properties/z/zoom/)
版面世界真的還挺有趣的呢!!
Google
Google
