<!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”也可以解决。