作者Hemiola ()
看板Browsers
標題Re: 剛剛測到一個 bug...
時間Wed Jul 22 18:20:00 2009
※ 引述《tyf99 (呵呵)》之銘言：
: Firefox, Opera 抓到的 scrollHeight 都是錯的！
: 這和 body margin, padding 什麼的都完全無關..
: test1.html 內容很簡單，只有一個 <div> 和兩個 <hr>
: <div> 高度設定 100px，很固定不會變.
: <hr> redner 出來的線條高度是 2px，<hr> 本身 margin-top=margin-bottom=0.5em
: 所以在 {font-size:16px; line-height:16px;} 設定下，<hr> 實際佔用高度 18px
看起來 hr 佔的高度是 18px 沒錯，但不要忘了，
hr 的上面沒有其他物件，所以 hr 的 margin-top 必須與 body 的 margin-top 重疊，
而兩者的 margin-top 都是 8px，只畫一次 8px。
而 hr 和 div 之間的距離，就是 margin-bottom = 8px。
所以根據我對 css 以及 dom 的瞭解，在你這個例子裏：
body (body 的 margin-top) 8px
hr------------------------------ 2px <--
(hr div 間 margin) 8px |
-------------------------------- |
| | |
| | | body 的實際 height
| div | 100px | 也就是
| | | scrollHeight
| | |
-------------------------------- |
(hr div 間 margin) 8px |
hr------------------------------ 2px <--
(body 的 margin-bottom) 8px
根據這樣來算，body.scrollHeight = 120px
因為 scrollHeight 不計入 margin。
: 結果抓出來的 scrollHeight:
: Firefox 120px
只有 Firefox render 出來的結果是符合這個算法的。
當然 html 並沒有規定 hr 的高度設定以及 margin 該是多少，
所以不同的瀏覽器可以有自己的解讀，這可能是造成 Opera 與 Safari 不同的原因。
但不論如何，scrollHeight 不能算 margin，
我覺得 Safari 把 margin 給算進去了，才會得到 136px。
: Opera 124px
: WebKit 136px
: 用肉眼看也只有 WebKit 的最正確，Firefox, Opera 都是錯的..
: 順帶一提，IE 抓到的是 132px，可能是沒有把 <hr> 本身的線條高度算進去.
: 但 Firefox, Opera 這兩個怎麼看都不正常.
根據上述，
把 iframe 的 height 設成 body 的 scrollHeight 時，
不能計入 body 的上下 margin，
但是當內框頁面載入時，會從頁面的頂部開始顯示，
也就是必須要畫內框頁面的 margin-top，
於是 iframe 的高度就不夠顯示底下的 hr。
在這點上只有 Firefox 和 Opera 是對的，
Safari 看得到兩條 hr 以及中間的 div，也看得到頁面的上下 margin，
顯然是錯的。
(也就是我前面說的，算入了 body 的上下 margin 的結果。)
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 123.193.74.131
※ 編輯: Hemiola 來自: 123.193.74.131 (07/22 18:20)
推 WandererM:常遇到的人都知道基本上Webkit出錯的地方很多就是XD 07/22 18:30
推 art1:好深入的討論 07/22 18:50
→ tyf99:其實我上一篇測的時候已經把 body margin 設為 0 了... 07/22 20:55
→ tyf99:fx 3.0.12: 120px, fx 3.0.11: 119px，跑個奇數出來是怎樣XD 07/22 20:57
→ tyf99:scrollHeight 好麻煩喔，我還是改用 clientHeight 算了.. 07/22 21:11
→ tyf99:至少各瀏覽器解讀 clientHeight 比較一致 07/22 21:13