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