<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>img在IE6和IE7中导致父层DIV高度多了4px</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#banner{
border:1px solid #000000;
}
以上这段程序在IE6和IE7中div#banner的实际offsetHeight值为132，在其它div#banner的实际高度为128
看了这段代码，很奇怪为什么在IE6和IE7中div#banner的实际高度是132而不是我们认为的128呢。
原因：由于img默认是inline类型元素，因此在渲染的时候被当作是文本流。
西文字体主要有三个部分构成：升部(Ascendor)、主线(main line)、以及降部(Descendors)。img元素要垂直对齐时，图片的底部是跟文本流的主线的底部对齐的。那些兼容性的浏览器们在渲染的时候呢，就会在文字的下方，显示出一点点空白，这点空白其实就是文字流的降部区域。
有以下方法可消除IE6和IE7的的情况:
方法1：在子标签内加上css hack， *margin-bottom:-4px;
方法2：给img加样式display:block 将图片转为块级元素
方法3：给#banner设定高度height="128"
方法4：设置图片的垂直对齐方式
即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>img在IE6和IE7中导致父层DIV高度多了4px</title>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
#banner{
border:1px solid #000000;
}
以上这段程序在IE6和IE7中div#banner的实际offsetHeight值为132，在其它div#banner的实际高度为128
看了这段代码，很奇怪为什么在IE6和IE7中div#banner的实际高度是132而不是我们认为的128呢。
原因：由于img默认是inline类型元素，因此在渲染的时候被当作是文本流。
西文字体主要有三个部分构成：升部(Ascendor)、主线(main line)、以及降部(Descendors)。img元素要垂直对齐时，图片的底部是跟文本流的主线的底部对齐的。那些兼容性的浏览器们在渲染的时候呢，就会在文字的下方，显示出一点点空白，这点空白其实就是文字流的降部区域。
有以下方法可消除IE6和IE7的的情况:
方法1：在子标签内加上css hack， *margin-bottom:-4px;
方法2：给img加样式display:block 将图片转为块级元素
方法3：给#banner设定高度height="128"
方法4：设置图片的垂直对齐方式
即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。
779
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
