DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 如何避免IE7中Zoom功能放大滾動條
如何避免IE7中Zoom功能放大滾動條
編輯:CSS詳解     
 由於現在顯示器越來越大17'、19'甚至20'都很普通了,並且顯示器的分辨率也越來越高,使用1280x1024的用戶已經高於使用800x600的用戶(根據本站統計)。原有的大量為800x600 9pt字體以及一些為1024x768 9pt字體設計的網頁已經非常過時了。所以Zoom功能逐漸成為了浏覽器的必備功能。

    這個功能我最早是在Opera中看到的(但我並不知道是哪種浏覽器最先提供),當時也就是為了用它來對付9pt螞蟻字體網頁,不過由於那時Opera對IE中顯示完好的網頁問題比較大,用了一段時間就沒怎麼用了,或者只是偶爾用用。後來使用Firefox,發現FF也提供了這個功能,不過FF的Zoom功能和Opera提供的Zoom功能效果是不同的。Opera的Zoom功能是對頁面做按比例放大,就是說我們看到的放大頁面就像是在放大鏡下看到的效果一樣。而FF提供的Zoom功能類似IE的字縮放,但又有所不同(IE是真正的文字縮放,而且只能縮放沒有使用CSS限制的默認字體的大小)。FF的字體縮放不管字體是否使用CSS定義,都可以被縮放,並且除了圖片外,文本框、復選框以及下拉列表框等控件也會被縮放。

    這兩種縮放各有優勢,不能說誰特別好,也不能說誰特別差。只是Opera的Zoom方式比較適合對付將網頁寬度定死為適合800x600或1024x768的頁面,而Firefox的Zoom適合對付頁面寬度根據浏覽器寬度自動填充的頁面。在這個Zoom功能方面,IE7之前的IE做的那是一個差勁啊。由於大多數網頁都使用CSS定義字體的大小,所以IE提供的那5個Level的字體大小控制,幾乎沒有任何實用價值。當然目前值得大家高興的是,IE7提供了Zoom功能。

    IE7提供了類似Opera那樣的Zoom功能,可是不知道IE在搞什麼飛機,Zoom頁面的同時,有很大一部分網頁的滾動條也會被同時Zoom。
   
    // 這滾動條也被放大的效果讓人相當傷感。。。

    通過簡單研究,原來IE7提供的這個Zoom功能是受doctype定義影響的。像我們博客園中每位blogger自己的首頁使用的doctype是:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">,這時頁面的滾動條就會被一起Zoom。而博客園首頁和管理頁面中的doctype是:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/Html4/loose.dtd">,這時頁面滾動條就不會被Zoom。

    除了標示出dtd文件的URL外,其實只需要修改DTD的類型就可以避免滾動條被Zoom,比如最簡單刪掉Transitional限制:<!DOCTYPE HTML PUBLIC "-//W3C//DTD Html 4.01 //EN">,這樣就可以了。至於到底IE7組要怎麼要的doctype,這個我目前還沒有找到正式的文檔。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved