当前位置： →
→ div嵌套img在IE67上4px差的有关问题
div嵌套img在IE67上4px差的有关问题
& 作者：佚名 & 来源： 互联网 & 热度：
&收藏到→_→：
摘要: div嵌套img在IE6 7下4px差的问题 &!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...
"div嵌套img在IE67上4px差的有关问题"：：
div嵌套img在ie6 7下4px差的问题
&!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/ charset=gb2312" /&&title&img在ie6和ie7中导致父层div高度多了4px&/title&&style type="text/css"&* {margin:0padding:0}#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:-4方法2：给img加样式display:block 将图片转为块级元素方法3：给#banner设定高度height="128"方法4：设置图片的垂直对齐方式即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。
搜索此文相关文章：此文来自: 马开东博客
网址: 站长QQ
上一篇：没有了
div嵌套img在IE67上4px差的有关问题_Web前端相关文章
Web前端_总排行榜
Web前端_最新
Web前端_月排行榜
Web前端_周排行榜
Web前端_日排行榜理解弹性盒：必知必会（译） 上传我的文档
 下载
 收藏
该文档贡献者很忙，什么也没留下。
 下载此文档
正在努力加载中...
CSS商业网站布局之道
下载积分：30
内容提示：CSS商业网站布局之道
文档格式：PDF|
浏览次数：64|
上传日期： 14:57:32|
文档星级：
全文阅读已结束，如果下载本文需要使用
 30 积分
下载此文档
该用户还上传了这些文档
CSS商业网站布局之道
官方公共微信资料评价：
所需积分：0常见的IE6兼容以及css兼容
时间： 16:12:43
&&&& 阅读：61
&&&& 评论：
&&&& 收藏：0
标签：IE6虽然随着XP系统退出市场在国外基本基本消失，但是在国内依然占据很大的市场份额。政务网站、页游官网等依然要考虑到IE6用户的体验。如果你的网站使用CSS3等&新技术&时，就必须果断放弃IE6的兼容。
浏览器添加默认样式
有些浏览器会给浏览器添加默认样式，而且不同浏览器添加的样式不同，导致布局在不同浏览器发生不同的错乱。
清楚默认样式，保证不同浏览器样式统一。（百度中有很多不错的清除样式模板）以下是我自己常用的清除样式文件：
1 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset, button, input, textarea,th, td { margin: 0;padding: 0;}/* 设置默认字体 */
2 body,button, input, select, textarea { /* for ie */ font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */ }
3 h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
4 h2 { font-size: 16px; }
5 h3 { font-size: 14px; }
6 h4, h5, h6 { font-size: 100% }
7 img { height: auto;vertical-align: middle;border: 0 none;}
8 address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
9 code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
10 small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
11 ul, ol { list-style: none; }
12 /* 重置文本格式元素 */
13 a { text-decoration: none; }
14 abbr[title], acronym[title] { /* 注：1.ie6 不支持 2.这里用了属性选择符，ie6 下无效果 */ border-bottom: 1px dotted;cursor: help;}
15 q:before, q:after { content: ‘‘; }
16 /* 重置表单元素 */
17 legend { color: #000; } /* for ie6 */
18 fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */
19 /* 注：optgroup 无法扶正 */
20 button, input, select, textarea { font-size: 100%; margin: 0;vertical-align: baseline; /* 使得表单元素在 ie 下能继承字体大小 */ }
21 table {border-collapse: collapse;border-spacing: 0;}
22 hr {border: none;height: 1px;}
23 /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */
24 html { overflow-y: scroll;}
25 body{font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;color: #8C8C8C;}
img标签底部间隙
div中包含一张图片，底部可能有2px、4px或更多的间隙，不同的font-size会影响间隙的大小。
将图片的垂直对齐方式vertical-align值设为top或bootm
将图片转化为块元素，display:
将包含图片的父容器字体大小设为0，font-size:0;
img在IE有蓝色边框
img标签在IE6-IE10加了超链接（a标签）后蓝色边框
img{border:0;}
margin上下边距合并
同时给上下容器添加上下边距会出现边距合并问题（合并最大的值）
不要同时给两个上下边距，只给一个就好。
margin-top没有加到指定元素上
在容器中给子元素一个margin-top没有想要的效果。
给父元素一个透明的像素边框 border:1px solid rgba(0,0,0,0);
通过给父元素一个padding-top来模拟margin-top。
IE6双倍边距
给浮动元素加margin-left时IE6会出现双倍边距。
给浮动元素display:
子元素浮动时父元素高度为0
父元素高度不确定，子元素浮动时，父元素高度变为0。浮动子元素层级高于父元素导致撑不开父元素。
父容器添加overflow:
在子元素后添加一个空div清除浮动 &div style="height:0;overflow:clear:"&&/div&
IE6不支持固定定位
IE6不支持position:
1 选择器{width: 200px;height: 200px;background: red;position: fixed;bottom: 50px;right: 50px;*position: absolute;*top: expression(eval(document.documentElement.scrollTop+200));}
2 *html{background-image: url("blank:about");background-attachment: absolute;}
IE6不支持png透明
IE6下png透明度不支持
background-image:url(123.png); _background: _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=‘123.png‘);
滤镜中的图片路径应该是绝对路径。
&!DOCTYPE HTML&文档类型的声明
IE6浏览器，当我们没有书写这个文档声明的时候，会触发IE6浏览器的怪异解析现象。
书写文档声明。
IE6默认行高
IE6、IE7、遨游浏览器；设置的文字高度超出盒模型内容区域设置的高度时会影响布局。
给超出高度的标签设置overflow：hidden；或者将文字的行高line-height设置为小于块的高度。
IE6 3px的bug
IE6浮动元素与非浮动元素处于一行有默认的3px间距。
设置所有元素浮动。
IE6只支持a链接的hover
IE6只支持a的hover不支持其他元素的hover。
使用JS模拟a:hover或者合理嵌套a链接。
IE6透明rgba与opacity
IE6不支持此两种透明的设置方法。
使用IE6当中的滤镜filter替代掉，如：opacity:0.6;_filter:alpha(opacity=60)。
IE6不支持min/max-height
IE6不支持min/max-height。
为IE6单独设置hack，即_height:最小高度值；_width：最小宽度值；
IE6li的间距问题
IIE6浏览器 li标签设置宽高，且li里面的元素发生了浮动。
li不设置宽高。
li内部元素不浮动。
a链接点击时有蓝色边框
a链接点击时有蓝色边框。
a:focus { outline: none 0; }
li在IE6自适应消失
如果li中有块元素在IE6下虽然浮动，默认宽度是100%而不是自适应。
li设置固定宽度
display:inline_
&&国之画&&&& &&&&chrome插件
版权所有 京ICP备号-2
迷上了代码！