|
表格
table 總是有 layout 的，它總表現(xiàn)為一個(gè)已定義寬度的對象。在IE6中，table-layout: fixed 通常和一個(gè)寬度設(shè)為100%的表格相同，同時(shí)這也會帶來很多問題(一些計(jì)算方面的錯(cuò)誤)。另外在IE5.5和IE6的quirks模式下還有一些別的需要注意的情況。
相對定位元素(r.p.)
注意，由于 position: relative 并不觸發(fā) hasLayout，所以很多諸如內(nèi)容消失或錯(cuò)位的渲染錯(cuò)誤就會因此而起。這些現(xiàn)象可能會在刷新頁面、調(diào)整窗口大小、滾動頁面、選中內(nèi)容等情況下出現(xiàn)。原因是 IE 在據(jù)這個(gè)屬性對元素做偏移處理時(shí)，卻似乎忘了發(fā)出信號讓其 layout 孩子元素進(jìn)行“重繪”(而如果是一個(gè)layout元素，那么在其重繪事件的信號鏈中，這個(gè)傳給其孩子的信號是會正常發(fā)出的)。
·r.p. parent and disappearing floated child
·disappearing list-background bug
以上是一些相關(guān)問題的描述。作為經(jīng)驗(yàn)之談，相對定位一個(gè)元素時(shí)最好給予其 layout。再有，我們也需要檢查擁有這種結(jié)構(gòu)的父元素是否也需要 layout 或者position: relative亦或二者都需要，如果涉及到浮動元素這點(diǎn)就十分重要。
絕對定位元素(a.p.)：
包含區(qū)塊，什么是包含區(qū)塊？
理解 CSS 的包含區(qū)塊概念很重要，它回答了絕對定位元素是相對哪里定位的問題：包含區(qū)塊決定了偏移起點(diǎn)，包含區(qū)塊定義了百分比長度的計(jì)算參考。
對于絕對定位元素，包含區(qū)塊是由其最近的定位祖先決定的。如果其祖先都沒有被定位，那么就使用初始包含區(qū)塊 html。
通常情況下我們會用 position: relative 來設(shè)定任意包含區(qū)塊。這就是說，我們可以讓一個(gè)絕對定位元素所參考的原點(diǎn)和長度等不依賴于元素的排列順序，這可以滿足諸如“內(nèi)容優(yōu)先”這種可訪問性概念的需要，也可以給復(fù)雜的浮動布局帶來方便。
但是由于 layout 概念的存在，這種設(shè)計(jì)理念的效果在IE中就要打個(gè)問號了：因?yàn)樵贗E中絕對定位只有當(dāng)其包含元素?fù)碛?layout 時(shí)才會計(jì)算正確，而且絕對定位元素的百分比寬度參考也搞錯(cuò)了對象。這里 IE5 和 IE6 的行為不同但都有問題。IE7b2 的行為就要好很多，雖然有些小地方還是有錯(cuò)誤。總之盡可能的讓絕對元素的包含區(qū)塊擁有 layout，而且盡量讓其就是絕對定位元素的父級元素（也就是說這個(gè)包換元素和絕對定位元素之間沒有絕對定位元素的別的祖先了）。
假設(shè)一個(gè)無 layout 的父元素被相對定位了——我們就得給它賦予 layout 才能使偏移量起作用：
·Absolutely Buggy II
假設(shè)一個(gè)未定位的父元素需要特定尺寸，而且頁面設(shè)計(jì)是基于百分比寬度的——我們就可以放棄這個(gè)想法了，因?yàn)闉g覽器支持不佳：
·absolutely positioned element and percentage width
濾鏡
MS專有的濾鏡屬性 filter 是只適用于 layout 元素的。有些濾鏡擴(kuò)展了對象的邊界。它們會顯示出自身特有的缺陷。
對已渲染元素的重排(re-flow)
當(dāng)所有元素都已渲染完成時(shí)，如果有一個(gè)因鼠標(biāo)經(jīng)過而引起的變化產(chǎn)生(比如某個(gè)鏈接的 background 有變化)，IE會對其 layout 包含區(qū)塊進(jìn)行重排。有時(shí)一些元素就會因此被排到了新的位置，因?yàn)楫?dāng)這個(gè)鼠標(biāo)經(jīng)過發(fā)生時(shí)，IE已經(jīng)知道了所有相關(guān)元素的寬度、偏移量等數(shù)據(jù)了。這在文檔首次載入時(shí)則不會發(fā)生，那時(shí)由于自動擴(kuò)張的特性，寬度還無法確定。這種情況會導(dǎo)致在鼠標(biāo)經(jīng)過時(shí)頁面出現(xiàn)跳變。
·Jump on :hover
·quirky percentages: the reflow
這些和重排問題相關(guān)的 bug 會給百分比邊距和補(bǔ)白使用較多的流動布局帶來不少麻煩。
背景原點(diǎn)
MS專有的這個(gè) hasLayout 還會影響背景的定位和擴(kuò)展。比如，根據(jù) CSS 規(guī)范，background-position: 0 0 應(yīng)該指元素的“補(bǔ)白邊緣(padding edge)”。而在 IE/Win 下，如果 hasLayout = false 則指的是“邊框邊緣(border edge)”，當(dāng) hasLayout=true 時(shí)指的才是補(bǔ)白邊緣：
·Background, Border, hasLayout
邊距重疊
hasLayout 會影響一個(gè)盒子和其子孫的邊距重疊。根據(jù)規(guī)范，一個(gè)盒子如果沒有上補(bǔ)白和上邊框，那么它的上邊距應(yīng)該和其文檔流中的第一個(gè)孩子元素的上邊距重疊：
·Collapsing Margins
·Uncollapsing Margins
在 IE/Win 中如果這個(gè)盒子有 layout 那么這種現(xiàn)象就不會發(fā)生了：似乎擁有 layout 會阻止其孩子的邊距伸出包含容器之外。此外當(dāng) hasLayout = true 時(shí)，不論包含容器還是孩子元素，都會有邊距計(jì)算錯(cuò)誤的問題出現(xiàn)。
·Margin collapsing and hasLayout
塊級別的鏈接
hasLayout 會影響一個(gè)塊級別鏈接的鼠標(biāo)響應(yīng)區(qū)域(可點(diǎn)擊區(qū)域)。通常 hasLayout = false 時(shí)只有文字覆蓋區(qū)域才能響應(yīng)。而 hasLayout = true 則整個(gè)塊狀區(qū)域都可響應(yīng)。添加了 onclick/onmouseover 等事件的任意塊級元素也有同樣的現(xiàn)象。
·Block anchors and hasLayout
在頁面內(nèi)使用鍵盤瀏覽：探索中
當(dāng)使用 tab 在頁面中瀏覽時(shí)，如果進(jìn)入了一個(gè)頁內(nèi)鏈接(in-page link)，那么接下來再按的 tab 鍵就不會正常繼續(xù)了：
·hasLayout Property Characterizes IE6 Bug
·Keyboard Navigation and Internet Explorer
tab 鍵會把用戶帶到(這通常是錯(cuò)誤的)其最近的 layout 祖先中的第一個(gè)目標(biāo)(如果這個(gè)祖先是由 table， div， span 或某些別的標(biāo)簽構(gòu)成)。
收縮包圍(shrink-wrapping)現(xiàn)象
給已經(jīng)有 width: auto 的元素添加某些屬性會導(dǎo)致它們在計(jì)算自身寬度時(shí)使用一種收縮包圍的算法。比如這些屬性 float: left|right, position: absolute|fixed, display: table|table-cell|inline-block|inline-table.
這些屬性造成的現(xiàn)象在IE/Win中也存在，當(dāng)然這是只對那些它支持的屬性而言。但是當(dāng)一個(gè)應(yīng)該收縮包圍的元素中包含一個(gè)擁有“l(fā)ayout”的塊級元素時(shí)，在絕大多數(shù)情況下，這個(gè)孩子元素的寬度會盡可能地?cái)U(kuò)展而與其中包含的內(nèi)容無關(guān)，同時(shí)也阻止了父元素的收縮包圍現(xiàn)象。
例子：
一個(gè)浮動的縱向?qū)Ш綗o序列表并沒有收縮包圍，因?yàn)槠渲械逆溄訛榱讼斜淼亩嘤嗫瞻譩ug并擴(kuò)展可點(diǎn)擊區(qū)域而擁有了 layout：a {display: block; zoom: 1;}。
這時(shí)收縮包圍現(xiàn)象只有在以下情況仍然有效：擁有 layout 的孩子元素同時(shí)也被賦予了一個(gè)特定寬度，或者這個(gè)孩子元素本身也是一個(gè)具有收縮包圍特性的元素，比如浮動元素。
邊緣裁切
通常而言，當(dāng)一個(gè)盒子包含了諸如伸出其邊緣的內(nèi)容這種更復(fù)雜的結(jié)構(gòu)時(shí)，這個(gè)容器就經(jīng)常需要“hasLayout”來避免一些渲染錯(cuò)誤。但使用這種常用方法又會在邊界處理時(shí)左右為難，因?yàn)橐粋�(gè)獲得“l(fā)ayout”的元素會變成某種自封閉的盒子。
內(nèi)部的內(nèi)容盒子會被裁切，比如使用負(fù)邊距向外移動時(shí)。
·Clipping of negative margined blocks in a hasLayout container
被裁掉的部分當(dāng)內(nèi)容盒子觸發(fā)了“l(fā)ayout”時(shí)可以再次出現(xiàn)，但在 IE6 中需要同時(shí)擁有 position: relative 才行。IE7 在這方面要略有改觀，它不再需要額外的 position: relative 了。
出處：web.Frontend
責(zé)任編輯：moby
上一頁 On having layout [3] 下一頁 On having layout [5]
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁制作版塊參加討論
|
第 1 頁 
第 4 頁 On having layout [4]
