※ 引述《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)