月份: 2012 年 4 月

由於要做兩欄排版、且邊欄的高度要自動延伸的話，要在最外框的DIV使用overflow屬性。假如這時候在內容需要使用點選超連結移動到命名錨點時，會發現移動到命名錨點後，以上的內容不見了。不管使用哪一種瀏覽器都一樣。

這是因為overflow需要設定hidden所致。等於點到命名錨點的時候，不是整頁移動，而是只有子元素的內容移動，而超出父元素之外因為hidden的設定因此就被隱藏了。

但是為了要可以做成邊欄可延伸的排版，overflow此屬性不可能移除。因此解法是替需要點選超連結移動到命名錨點的頁面，加上網頁錨點平滑移動效果，就不會有內容不見得問題。

使用說明參考連結
http://www.webppd.com/thread-2709-1-1.html

平滑錨點移動效果demo
http://www.dezinerfolio.com/wp-content/uploads/smoothscrolldemo/df_smooth_scroll.html

狀況一：
在父元素div裡面的第一個子元素，如果有margin-top的時候，margin-top會被父元素的div搶走。最後一個子元素的margin-bottom也會被父元素的div搶走。

解法：有兩種，我是用把父元素的overflow設定成hidden的方式。另外看到有人說把子元素設定成inline-block也可以。可參考這篇。實作上，父元素如果設定float，也會避免掉這個問題。

狀況二：
兩個層級相同的子元素，上面的有margin-bottom，下面的有margin-top時。會有塌陷的問題，於是他們之間的間距不會是bottom+top，而是看誰大就用誰。

解法：這其實沒什麼特別解法，反正就是只用一邊的margin就好，比較單純。

透過將margin設定為負值，並搭配postion:relative;與z-index可以控制同等級的div前後覆蓋的順序。要注意到的是子元素一定會蓋在父元素上，要相疊的兩個div層級要相同。預設在結構上排在越想被蓋在上面的div，只要設定relative，配合margin設定負值，加上z-index，就可以不使用絕對定位的調整div層疊的順序。

以下面這段原始碼為例子
<div id=”all”>
<div id=”a01″>
</div>
<div id=”a02″>
</div>
<div id=”a03″>
</div>
</div>

#a01~#a03是同等級的。
如果希望a03蓋在a02、a01之上，比較單純，因為a03在順序上排在比較下面，因此預設圖層順序排在比較上面，只要在a03設定以下屬性，就可以覆蓋在a02跟a01之上
#a03{
margin-top:-20px;}

如果希望a02蓋在a01 之上，那設定一樣。但是假設在排版上希望a02顯示在a01的上方，但是又希望a01在圖層順序上壓在a02之上的話要怎麼做呢？
#a01{
position:relative;}
這樣設定就可以了，如果有多層的話，就搭配z-index
#a01{
position:relative;
z-index:5;}

所有同層級的div，只要設定 position:relative; 就可以使用 z-index 決定看哪個div要壓在上面。所以有的定位可以用這個方法取代position:absolute;（因為據說畫面上用太多position:absolute; 有時候會造成奇怪的問題）

 

這是發生在沒有放網站宣告的情況下，所有IE都會這樣。如果有放宣告，則只有IE6有此問題。

假設使用li包住a，
li有指定width、height、float，
而a有指定display:block，且有指定height但無指定width的情況下。
IE會出現該li撐滿一整行的狀況。
但只要把a的height拿掉，就不會撐滿一整行。

應該是不知道哪個屬性觸發了IE自己本身的haslayout

之前以為在IE底下必然會撐寬，所以只好把li指定寬度，
導致如果他的內容就是不確定有幾個字的時候，沒辦法自動變長。
解法是height不要設定，如果要把a的區塊高度撐高，改設定line-height、不要設定height即可，不過先決條件是原本文字就只有一行，如果多行就不適用此方法。