DIV中标签影响高度
<script type="text/javascript">
$(document).ready(function () {
//parent.$.modalbox.resize({w: 500, h: 300});
//parent.$.modalbox.moveto("center");
console.warn($("body>div:first").height());
console.warn($("body>div:first").outerHeight(true));
console.warn($("body>div:first>h3").height());
console.warn($("body>div:first>h3").outerHeight(true));
})
</script><body>
<div>
<h3 style="margin-top:10px;
margin-bottom:10px;">
<span id="pass-title">xyz</span>
</h3>
</div>
</body>以上是我的测试代码。
DIV中包含一个h3标签，单独用$("body>div:first>h3").outerHeight(true)取h3的高度可以取到包含Margin的总高度，但是
用$("body>div:first").outerHeight(true)取div的总高度却不包含margin的高度，求高手帮忙
...全文
请发表友善的回复…
发表回复
哋岼線 2014-09-19
- 打赏
- 举报
谢谢了，你的图很有用哦。分给你了
”事實上div的margin-top是collepse h3標籤的 margin-top“ 这个是你根据实际情况总结的还是官方文档有说的？
XZowie 2014-09-19
- 打赏
- 举报
谢谢了，你的图很有用哦。分给你了
”事實上div的margin-top是collepse h3標籤的 margin-top“ 这个是你根据实际情况总结的还是官方文档有说的？[/quote]
官方文檔： http://www.w3.org/TR/CSS2/box.html 8-3-1底下其中一行
top margin of a box and top margin of its first in-flow child
XZowie 2014-09-18
- 打赏
- 举报
補充：
在舊ie下h3要設
h3{
display:inline-block;
*display:inline;
*zoom:1;
}
XZowie 2014-09-18
- 打赏
- 举报
剛替你畫了一張圖解：
你可以將h3設display:inline-block; width:100% 解決
你可以將h3設display:inline-block; width:100% 解決
哋岼線 2014-09-18
- 打赏
- 举报
好像还是不行啊[/quote]
没问题啊float, 和 display:inline-block之后会被内部元素完全撑开[/quote]
前后不换行的...
XZowie 2014-09-18
- 打赏
- 举报
事實上div的margin-top是collepse h3標籤的 margin-top，但並不算在div內，所以div實際的outerheight 會比h3來的低
wz_307 2014-09-18
- 打赏
- 举报
好像还是不行啊[/quote]
没问题啊float, 和 display:inline-block之后会被内部元素完全撑开
哋岼線 2014-09-18
- 打赏
- 举报
好像还是不行啊
哋岼線 2014-09-17
- 打赏
- 举报
有人没啊，快来看看啦
wz_307 2014-09-17
- 打赏
- 举报
这是display属性详解http://www.w3school.com.cn/cssref/pr_class_display.asp,
lz也可以把div加个float:left试试.
css-box模型还是挺复杂的
wz_307 2014-09-17
- 打赏
- 举报
饿..
LZ改成<div style="display:inline-block;">再看看
哋岼線 2014-09-16
- 打赏
- 举报
来人啦。顶顶顶
