欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中不為人知Zoom屬性的使用介紹(IE私有屬性)

  發(fā)布時(shí)間:2011-11-28 14:40:53   作者:佚名   我要評(píng)論
這里我們介紹一下CSS中的Zoom屬性,這個(gè)屬性一般不為人知,甚至有些CSS手冊(cè)中都查詢不到
其實(shí)Zoom屬性是IE瀏覽器的專有屬性,F(xiàn)irefox等瀏覽器不支持。它可以設(shè)置或檢索對(duì)象的縮放比例。除此之外,它還有其他一些小作用,比如觸發(fā)ie的hasLayout屬性,清除浮動(dòng)、清除margin的重疊等。

Zoom的使用方法:

zoom : normal | number

normal :  默認(rèn)值。使用對(duì)象的實(shí)際尺寸

number :  百分?jǐn)?shù) | 無(wú)符號(hào)浮點(diǎn)實(shí)數(shù)。浮點(diǎn)實(shí)數(shù)值為1.0或百分?jǐn)?shù)為100%時(shí)相當(dāng)于此屬性的 normal 值用白話講解就是zoom:后面的數(shù)字即放大的倍數(shù),可以是數(shù)值,也可以是百分比。如:zoom:1,zoom:120%。而這個(gè)屬性只要在IE中才起作用,所以很少用到它的實(shí)際用途,而最經(jīng)常用到作用是清除浮動(dòng)等,如:


復(fù)制代碼
代碼如下:

.border{
border:1px solid #CCC;
padding:2px;
overflow:hidden;
_zoom:1;
}

_zoom是CSS hack中專對(duì)IE6起作用的部分。IE6瀏覽器會(huì)執(zhí)行zoom:1表示對(duì)象的縮放比例,但這里
overflow:hidden;和_zoom:1;是連起來(lái)用的,作用是清除border內(nèi)部浮動(dòng)。

同理,還可以使用同樣方法清除margin屬性在IE瀏覽器中的重疊問(wèn)題。

CSS中zoom:1的作用

兼容IE6、IE7、IE8瀏覽器,經(jīng)常會(huì)遇到一些問(wèn)題,可以使用zoom:1來(lái)解決,有如下作用:
觸發(fā)IE瀏覽器的haslayout
解決ie下的浮動(dòng),margin重疊等一些問(wèn)題。
比如,本站使用DIV做一行兩列顯示,HTML代碼:


復(fù)制代碼
代碼如下:

<div class="h_mainbox">
<h2>推薦文章</h2>
<ul class="mainlist">
<li><a href="#" style="color:#0000FF" target="_blank">CSS庫(kù)吧</a></li>
<li><a href="#" style="color:#0000FF" target="_blank">原創(chuàng)< /a></li>
</ul>
</div>

CSS代碼:

復(fù)制代碼
代碼如下:

.h_mainbox { border:1px solid #dadada; padding:4px 15px; background:url(../mainbox_bg.gif) 0 1px repeat-x; margin-bottom:6px; overflow:hidden}
.h_mainbox h2 { font-size:12px; height:30px; line-height:30px; border-bottom:1px solid #ccc; color:#555;}
.h_mainbox h2 span { float:right; font-weight:normal;}
.h_mainbox ul { padding:6px 0px; background:#fff;}
.mainlist { overflow:auto; zoom:1;}
.h_mainbox li { width:268px; float:left; height:24px; overflow:hidden; background:url(../icon3.gif) 0 6px no-repeat; padding:0px 5px 0px 18px; line-height:200%;}

.mainlist里面的zoom:1的那里就可以在IE6、IE7、IE8正常顯示效果了。

css中的zoom的作用

1、檢查頁(yè)面的標(biāo)簽是否閉合
不要小看這條,也許折騰了你兩天都沒有解決的 CSS BUG 問(wèn)題,卻僅僅源于這里。畢竟頁(yè)面的模板一般都是由開發(fā)來(lái)嵌套的,而他們很容易犯此類問(wèn)題。
快捷提示:可以用 Dreamweaver 打開文件檢查,一般沒有閉合的標(biāo)簽,會(huì)黃色背景高亮。

  2、樣式排除法
有些復(fù)雜的頁(yè)面也許加載了 N 個(gè)外鏈 CSS 文件,那么逐個(gè)刪除 CSS 文件,找到 BUG 觸發(fā)的具體 CSS 文件,縮小鎖定的范圍。

  對(duì)于剛才鎖定的問(wèn)題 CSS 樣式文件,逐行刪除具體的樣式定義,定位到具體的觸發(fā)樣式定義,甚至是具體的觸發(fā)樣式屬性。

  3、模塊確認(rèn)法
有時(shí)候我們也可以從頁(yè)面的 HTML 元素出發(fā)。刪除頁(yè)面中不同的 HTML 模塊,尋找到觸發(fā)問(wèn)題的 HTML 模塊。

  4、檢查是否清除浮動(dòng)
其實(shí)有不少的 CSS BUG 問(wèn)題是因?yàn)闆]有清除浮動(dòng)造成的。養(yǎng)成良好的清除浮動(dòng)的習(xí)慣是必要的,推薦使用 無(wú)額外 HTML 標(biāo)簽的清除浮動(dòng)的方法(盡量避免使用 overflow:hidden;zoom:1 的類似方法來(lái)清除浮動(dòng),會(huì)有太多的限制性)。

  5、檢查 IE 下是否觸發(fā) haslayout
很多的 IE 下復(fù)雜 CSS BUG 都與 IE 特有的 haslayout 息息相關(guān)。熟悉和理解 haslayout 對(duì)于處理復(fù)雜的 CSS BUG 會(huì)事半功倍。推薦閱讀 old9 翻譯的 《On having layout》(如果無(wú)法翻越穿越偉大的 GFW,可閱讀 藍(lán)色上的轉(zhuǎn)帖 )
快捷提示:如果觸發(fā)了 haslayout,IE 的調(diào)試工具 IE Developer Toolbar 中的屬性中將會(huì)顯示 haslayout 值為 -1。

  6、邊框背景調(diào)試法
故名思議就是給元素設(shè)置顯眼的邊框或者背景(一般黑色或紅色),進(jìn)行調(diào)試。此方法是最常用的調(diào)試 CSS BUG 的方法之一,對(duì)于復(fù)雜 BUG 依舊適用。經(jīng)濟(jì)實(shí)惠還環(huán)保^^
最后想強(qiáng)調(diào)一點(diǎn)的是,養(yǎng)成良好的書寫習(xí)慣,減少額外標(biāo)簽,盡量語(yǔ)義,符合標(biāo)準(zhǔn),其實(shí)可以為我們減少很多額外的復(fù)雜 CSS BUG,更多的時(shí)候其實(shí)是我們自己給自己制造了麻煩。希望你遠(yuǎn)離 BUG ,生活越來(lái)越美好。

相關(guān)文章

  • 詳解CSS中zoom屬性或overflow:auto屬性清除浮動(dòng)的作用

    這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動(dòng)的作用,文中通過(guò)實(shí)例代碼介紹的很詳細(xì),相信會(huì)對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值,有需要的朋
    2016-11-26
  • CSS中的zoom屬性和scale屬性的用法及區(qū)別

    這篇文章主要介紹了CSS中的zoom屬性和scale屬性的用法及區(qū)別,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下
    2015-09-07
  • IE瀏覽器專有css屬性之zoom詳解

    Zoom屬性是IE瀏覽器的專有屬性,F(xiàn)irefox等瀏覽器不支持。它可以設(shè)置或檢索對(duì)象的縮放比例。除此之外,它還有其他一些小作用,比如觸發(fā)ie的hasLayout屬性,清除浮動(dòng)、清除ma
    2014-04-02
  • css中zoom:1屬性的定義和作用

    這篇文章主要介紹了css中zoom:1屬性的定義和作用,需要的朋友可以參考下
    2019-07-24

最新評(píng)論