UC知道紧急,div的高度问题?
来源：百度知道 编辑：UC知道 时间：2024/05/10 18:43:31
紧急紧急,出事了,div的高度问题?
<style type="text/css">
div{
border:1px dashed blue;
text-align:center;
height:200px;
line-height:16px;
padding-top:40px;
padding-bottom:40px;
background:yellow;
}
</style>
<div>中国</div>
在ie中,顶部扩充是40px,文字行高是16px;文字下的底部扩充是40px;那么剩下的部分是200-(40+16+40)=104
40+16+40+104正好等于200
问题是在火狐中,顶部扩充是40px,文字行高是16px,文字下的底部扩充是40px;那么剩下的部分也应该是200-(40+16+40)=104
为什么不是104px,居然比104px还要长很多很多,怎么回事啊,怎么算的啊?
<style type="text/css">
div{
border:1px dashed blue;
text-align:center;
height:200px;
line-height:16px;
padding-top:40px;
padding-bottom:40px;
background:yellow;
}
</style>
<div>中国</div>
在ie中,顶部扩充是40px,文字行高是16px;文字下的底部扩充是40px;那么剩下的部分是200-(40+16+40)=104
40+16+40+104正好等于200
问题是在火狐中,顶部扩充是40px,文字行高是16px,文字下的底部扩充是40px;那么剩下的部分也应该是200-(40+16+40)=104
为什么不是104px,居然比104px还要长很多很多,怎么回事啊,怎么算的啊?
200+40+2=242 是加在一起的
所以 最好的解决方案
宽到一个div 然后pading margin一个层
首先，lz这段代码定义的div高度应该是200+2*40+2=281px(2是边框的宽度）。
其次，火狐显示的结果才是正确结果。
建议楼主搜索一下“盒模型”，好好看看！