...定义相同的height,可呈现的高度不一样怎么办?

发布网友 发布时间：2024-10-19 05:31

我来回答

共3个回答

热心网友 时间：2024-10-31 19:47

这个问题是最常见的盒子模型问题，不仅是高度，宽度同样有一样的问题！

主要原因是包含ie6以下版本的浏览器对盒子模型的解析和标准css对盒子模型的解析是不同～

按css本身的标准盒子模型（也就是你说的定义了一个div的高度或者宽度），是指内容的区域的高度和宽度，不包含paading、border、margin。

但是在ie6以下版本，对盒子模型的解析并不是按css的标准来的，而是内容区域+padding+border。 这就造成同一个盒子模型在ie6以下的浏览器和ie7以上版本、以及火狐狸等对css标准解析的浏览器下会出现不一样的情况！

比如
<div style="width:100px;height:100px; margin:10px;padding10px; border:1px;">
比如这个列子
</div>
在ie6以下版本被解析成高度100+上padding10+下padding10+上border 1+ 下border 1=122

而在ie7以上既火狐狸浏览器下高度为：就是我们我们定义的高度100px （这才是css的标准解析）

目前用ie6以下版本浏览器的人还很多，要解决这个问题最简单的方法就是多套用一层div，上面的例子可以修改为
<div style="width:100px;height:100px; margin:10px;">
<div style="padding10px; border:1px;">
比如这个列子
</div>
</div>

当然也可以用hack来解决 ，不过用hack就相对比这个复杂！
简单来说为了兼容 我们不建议在一个已经设置了宽度和高度的div上在设置padding 和 border，这样就能避免你说的问题！

热心网友 时间：2024-10-31 19:47

......基本上....ie6、ie较高版本、其他内核浏览器(如火狐)间会出现兼容性问题

热心网友 时间：2024-10-31 19:52

Strict//EN" "">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
div {
cursor:pointer;
line-height:20px;
border:10px solid red
}
-->
</style>
<div onclick="alert(this.offsetHeight)">ffffffffff</div>