|
英文原文在此：
http://www.satzansatz.de/cssd/onhavinglayout.htm
文中所有的 layout 這個(gè)單詞都未作翻譯，一來(lái)本身這個(gè)單詞意思就比較多，翻成啥都覺得別扭，二來(lái)它也是專有的屬性，所以就意會(huì)一下吧。水平有限，很多地方都是模模糊糊地意譯，發(fā)現(xiàn)錯(cuò)誤歡迎留言指出。
引用一段來(lái)自Dean Edwards的評(píng)價(jià)：
I recommend that every CSS designer and DOM scripter read this. Understanding “l(fā)ayout” gives a huge insight into lots of other IE bugs and idiosyncrasies.
(Dean Edwards)
4月16日修訂的內(nèi)容：
將quirks模式這一部分單獨(dú)移動(dòng)到一篇文章中講述。
添加：邊緣裁切。
添加：收縮包圍(shrink-wrapping)現(xiàn)象。
5月17日修訂的內(nèi)容：
重寫了了浮動(dòng)元素旁邊的元素這一部分。
部分章節(jié)小的修正：屬性，有關(guān)內(nèi)聯(lián)級(jí)別元素，CSS hacks。
重新整理了部分章節(jié)的語(yǔ)言：定義，數(shù)據(jù)，問題種種，分析，清除浮動(dòng)和自動(dòng)擴(kuò)展適應(yīng)高度，絕對(duì)定位元素。
On having layout
本文修訂中
當(dāng)前版本：Rev. 7 2006–05–17
修訂歷史
各種語(yǔ)言版本
目錄
介紹
Internet Explorer 中有很多奇怪的渲染問題可以通過賦予其“l(fā)ayout”得到解決。John Gallant 和 Holly Bergevin 把這些問題歸類為“尺寸bug(dimensional bugs)”，意思是這些 bug 可以通過賦予相應(yīng)元素某個(gè)寬度或高度解決。這便引出關(guān)于“l(fā)ayout”的一個(gè)問題：為什么它會(huì)改變?cè)氐匿秩咎匦裕瑸槭裁此鼤?huì)影響到元素之間的關(guān)系？這個(gè)問題問得很好，但卻很難回答。在這篇文章中，我們專注于這個(gè)復(fù)雜問題會(huì)有那些方面的表現(xiàn)，某一方面的具體討論和范例請(qǐng)參考文中給出的相關(guān)鏈接。
hasLayout — 定義
“Layout”是一個(gè) IE/Win 的私有概念，它決定了一個(gè)元素如何顯示以及約束其包含的內(nèi)容、如何與其他元素交互和建立聯(lián)系、如何響應(yīng)和傳遞應(yīng)用程序事件/用戶事件等。
這種渲染特性可以通過某些 CSS 屬性被不可逆轉(zhuǎn)地觸發(fā)。而有些 HTML 元素則默認(rèn)就具有“l(fā)ayout”。
微軟的開發(fā)者們認(rèn)為元素都應(yīng)該可以擁有一個(gè)“屬性(property)”(這是面向?qū)ο缶幊讨械囊粋�(gè)概念)，于是他們便使用了 hasLayout，這種渲染特性生效時(shí)也就是將 hasLayout 設(shè)成了 true 之時(shí)。
術(shù)語(yǔ)
當(dāng)我們說一個(gè)元素“得到 layout”，或者說一個(gè)元素“擁有 layout” 的時(shí)候，我們的意思是指它的微軟專有屬性 hasLayout 為此被設(shè)為了 true 。一個(gè)“l(fā)ayout元素”可以是一個(gè)默認(rèn)就擁有 layout 的元素或者是一個(gè)通過設(shè)置某些 CSS 屬性得到 layout 的元素。
而“無(wú)layout元素”，是指 hasLayout 未被觸發(fā)的元素，比如一個(gè)未設(shè)定寬高尺寸的干凈 div 元素就可以做為一個(gè)“無(wú)layout祖先”。
給一個(gè)默認(rèn)沒有 layout 的元素賦予 layout 的方法包括設(shè)置可觸發(fā) hasLayout = true 的 CSS 屬性。參考默認(rèn) layout 元素以及這些屬性列表。沒有辦法設(shè)置 hasLayout = false ， 除非把一開始那些觸發(fā) hasLayout = true 的 CSS 屬性去除。
問題種種
hasLayout 的問題不管新手還是老手，不管設(shè)計(jì)師或者程序員可能都遇到過。Layout 在顯示盒子時(shí)有著不同尋常而且難以預(yù)料的效果，而且有時(shí)甚至?xí)窟B到他們的孩子元素。
一個(gè)元素是否具有“l(fā)ayout”可能會(huì)引發(fā)如下的一些問題：
IE 很多常見的浮動(dòng) bug 。
元素本身對(duì)一些基本屬性的異常處理問題。
容器和其子孫之間的邊距重疊(margin collapsing)問題。
使用列表時(shí)遇到的諸多問題。
背景圖像的定位偏差問題。
使用腳本時(shí)遇到的瀏覽器之間處理不一致的問題。
上面的列表只是列出一個(gè)大概，也不完善。下面的文章將盡可能詳細(xì)徹底的描述有無(wú)“l(fā)ayout”所帶來(lái)的各種問題。
Layout 從何而來(lái)
不同于標(biāo)準(zhǔn)屬性，也不像某些瀏覽器的私有 CSS 屬性，layout 無(wú)法通過某一個(gè) CSS 聲明直接設(shè)定 。也就是說沒有“l(fā)ayout屬性”這么一個(gè)東西，元素要么本身自動(dòng)擁有 layout，要么借助一些 CSS 聲明悄悄地獲得 layout。
默認(rèn)layout元素
下列元素應(yīng)該是默認(rèn)具有 layout 的：
<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <select>, <textarea>, <button> <iframe>, <embed>, <object>, <applet> <marquee>
出處：web.Frontend
責(zé)任編輯：moby
上一頁(yè) 下一頁(yè) On having layout [2]
◎進(jìn)入論壇網(wǎng)站綜合、網(wǎng)頁(yè)制作版塊參加討論
|
第 1 頁(yè) On having layout [1]
第 2 頁(yè) 
