網頁藝術思考 - CSS 網頁設計藝術

為物件指定 hasLayout property

• 說明： ie 專有用法 (ie only)。部分 ie 專有的特性 (property) ，如 filters and transitions ，有作用的必要條件就是指定 hasLayout 性質。 hasLayout 性質本來是微軟為了補救 ie 內部不完善所自創的，並非 w3c 標準，所以有時用起來覺得相當無厘頭。但神奇地， ie7 以前舊版衍生的網頁不正常呈現問題 (ie bugs)，大多數竟可由指定 hasLayout 來解決。
• 適合：有 html 及 css 語法撰寫基礎者。
• 難度：
• 更新：2008-02-18
• 適用：ie7 ~ ie5.5

hasLayout "property" 和 css property 雖然英文名稱一樣，但實際上不太相同。 hasLayout 本身並非 css 特性的一種，所以沒辦法直接定義物件的 css 特性 hasLayout 的值 (value)，而是間接以其它的 css 特性指定在物件上，使該物件符合 hasLayout ，所以我比較傾向稱它是 hasLayout 「性質」。

符合以下任一種 css 特性及值的定義方式，物件即是 hasLayout (有編置) ：

• height: auto; (預設值) 以外的值 [參閱 CSS 特性]
• width: auto; (預設值) 以外的值 [參閱 CSS 特性]
• float: none; (預設值) 以外的值 [參閱 CSS 特性]
• position: absolute; [參閱 CSS 特性]
• display: inline-block; [參閱 CSS 特性]
• zoom: normal; (預設值) 以外的值 [參閱 CSS 特性]
• writing-mode: tb-rl; [參閱 CSS 特性]

ie 7 增加了幾個新的指定方式：

• min-height: ?; 任何長度值 [參閱 CSS 特性]
• max-height: none; (預設值) 以外的值 [參閱 CSS 特性]
• min-width: ?; 任何長度值 [參閱 CSS 特性]
• max-width: none; (預設值) 以外的值 [參閱 CSS 特性]
• overflow: visible (預設值) 以外的值 [參閱 CSS 特性]
• overflow-x: visible (預設值) 以外的值 [參閱 CSS 特性]
• overflow-y: visible (預設值) 以外的值 [參閱 CSS 特性]
• position: fixed; [參閱 CSS 特性]

認識 hasLayout 的 css 規則

上述規則有的看起來有點含糊，有的好像又很陌生，那要怎麼正確定義物件 hasLayout 呢？

height 或 width 特性只需要指定一個「具體值」 hasLayout 就有效了，如 width:80%; ，甚至 height:0; 也可以喲。 min-height, max-height, min-width, max-width 等特性也可以如法炮製，如 max-width:100em; 或是 min-height:0;。需要注意的是依據 css 規則，這類特性在行內層級 (inline-level) 元素不會有作用。

float 特性通常有 float:left; 或 float:right; 二種值都可以達成 hasLayout。

position:absolute; 及 position:fixed; 算是同類型的定義，二者都能使 hasLayout 有效，只是 "fixed" ie 6 沒支援。

zoom 特性看名稱就知道是縮放大小，像 height 之類一樣，只要有「具體值」 hasLayout 就有效了，而且行內層級元素也能作用，如 zoom:0.9; 。撰文時這個特性僅為 ie 專用 (ie only) ，非 w3c 標準，所以非 ie 瀏覽器 (firefox, opera, safari, …) 沒有支援也就不會有任何影響。

指定 overflow 特性通常有 overflow:auto;, overflow:hidden; 或 overflow:scroll; 三種值，雖然 ie 6 有支援，不過目前只有 ie 7 會讓 hasLayout 有效。而 overflow-x 及 overflow-y 為 css3 的規則，撰文時僅 ie 及 firefox 支援。

writing-mode 特性也是 css3 的規則，比較少會用這個特性指定 hasLayout ，撰文時也僅 ie 支援。

物件原則上預設都是不具 hasLayout 性質，所以我們才需要特別指定 hasLayout ，但是有部分元素在 ie 預先就已內定永遠為 hasLayout ，明細可參閱 Microsoft 官方文件。

卸除 hasLayout 性質

當然，可以反向定義物件 hasLayout 性質為無效，不過部分元素已內定 hasLayout 就沒辦法使其失效的。會用到卸除 hasLayout 的時機，都是針對已指定過 hasLayout 的物件，卻可能因某些目的而必須轉回無 hasLayout 。所以，通常只要將原先定義 css 特性，再重新定義回「預設值」，就會讓物件的 hasLayout 性質無效了。

css 特性及值再定義成以下任一種方式，即可使 hasLayout 無效 (卸除) ：

• height: auto;
• width: auto;
• max-height: none;
• max-width: none;
• float: none;
• position: static; (預設值)
• overflow: visible;
• overflow-x: visible;
• overflow-y: visible;
• zoom: normal;
• writing-mode: lr-tb; (預設值)

舉例子看看就明瞭了：

xhtml

<div id="main">
 <p>漁舟逐水愛山春，兩岸桃花夾去津。坐看紅樹不知遠，行盡青溪不見人。</p>
 <p>山口潛行始隈隩，山開曠望旋平陸。遙看一處攢雲樹，近入千家散花竹。</p>
 <p class="extract">節錄自：王維的桃源行</p>
</div>

css (例一)

#main p {float:left;}
#main .extract {float:none;}

css (例二)

#main p {zoom:125%;}
#main .extract {zoom:normal;}

兩例的 css 都類似情形，前一條定義先讓全部三段 p 成為 hasLayout ，後一條再讓最後一段的 hasLayout 無效。需要了解的是，卸除 hasLayout 的規則是定義在 hasLayout 規則之後的另一組指標 (selectors) 裡，而且是取代先前「相同的」特性，前面用 float 指定，後面就要用 float 來卸除，這本來就是依循 css 的規則，只是再提醒一下而已。

無法卸除 hasLayout 的定義

以 display:inline-block; 指定 hasLayout 後，就沒辦法卸除，無論再定義回 display:inline; 或 display:block; ， hasLayout 依然維持有效，所以上述卸除規則沒有這項，這點必須注意。

由於 min-height 與 min-width 的預設值是 0，所以縱使再定義為 min-height:0; (具體值)，也無法卸除 hasLayout 。但是 ie 卻接受 min-height:auto; 或 min-width:auto; 來卸除 hasLayout ，特別須注意的是 auto 值並非 w3c 標準，所以沒有把它列在上述卸除規則。

參考資源

• msdn hasLayout Property - Microsoft 官方文件 (英文) 。
• On having layout - 完整研討，內容較繁長，已有譯成多種語言。
• hasLayout by Zoffix Znet - 較精簡解說 (英文) 。