推 harry1123:感謝大大，之前想超久的....看來我CSS還很需要加強QQ 05/03 19:16
推 elsa0116:感謝您的解惑!!!昨天老師也被我這題困住了XDDDD 05/03 20:45
根據標準，DIV 一旦設定了 inline-block，
它的 baseline 就會變成內部文字 "最後一行" 的 baseline
因此該行會對齊前後文字流的 baseline
至於這個狀況我的理解是這樣，不確定是不是完全正確，
如果有錯還請各位前輩不吝指正：
第一個 DIV 內的 <p> 有瀏覽器的預設 margin，
所以它裡頭的文字會往下跑，
後面的 DIV 的 baseline 就因此跟著往下跑了。
然後，根據標準，這個行為在設定了 overflow 後就會解除。
只要不是 overflow: visible (這是預設值)，
DIV 的 baseline 就會改成該 DIV 本身 margin-bottom 的最外緣
http://www.w3.org/TR/CSS2/images/boxdim.png
也就是這張圖裡 "BM" 最底下的虛線
所以你的定位就恢復正常了 (￣▽￣a)﹏﹏
PS. 關於後面這件事，webkit 引擎是顯示錯誤的，
overflow 設定後，仍然會把 baseline 維持在最後一行...
之前遇到這個問題害我困擾好久 囧>
剛剛實測才發現 Chrome 把它修掉了...
但 webkit 本身似乎沒有修？
https://bugs.webkit.org/show_bug.cgi?id=36084
--
═ 風痕影 ════════════════════════════
「藤井樹，這主意雖好，但是，我喜歡統一，而不是光泉耶！」
══════════════════════ http://hit1205.org ═
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 123.241.214.47
※ 文章網址: http://www.ptt.cc/bbs/Web_Design/M.1399107169.A.C7F.html