1. 图片下方出现几像素的空白间隙
问题说明: 这个问题在 ie6 和 ff(火狐) 下经常见到, 例如 < div><img src=""/></div > 这个图片下面会有一条空白间隙,
解决方法: 给图上一个垂直方向的属性如: vertical-align: top(任意一个就行 middle); 这个问题从而延伸到, object(视频) 和 textarea 在火狐下也会出现类似的问题, 解决方法一样.
object,textarea,img{vertical-align: top;}
2.IE6 双倍 margin 的 BUG(双边距)
(推荐学习: html 视频教程 https://www.html.cn/html/ )
问题说明: 这是 ie6 一个著名的 bug, 当一个元素向一边浮动时, 其它同一个方向如果有 margin 的话, ie6 就会产生双倍的 margin. 例如:<div style="float: left;margin-left: 10px;"></div > 在 ie6 下显示会有 margin-left:20px 的距离
解决方法: 加个_display:inline: 属性, 例如
<div style="float: left;margin-left: 10px;_display: inline;"></div>
3.ie6 下的浮动元素和非浮动元素间出现 3 像素 BUG
问题说明: 这也是 ie6 一个著名的 bug, 当一个元素浮动时, 同级别的文字没有浮动, 在 ie6 下它们之间就会产生 3 个像素的 bug. 例如:<div><img style="float: left;" src=""/> 摘要摘要摘要摘要 </div>, 图片和文字就会出现 3 像素
解决方法: 方法一, 两个元素都浮动, 如:
- <div>
- <img style="float: left;" src=""/>
- <span style="float: left;"> 摘要摘要摘要摘要 </span>
- </div>;
方法二, 这种设计时一般图片和文字要有间隙的, 做个 ie6 的 hack 就行, 如:
- <div>
- <img style="float: left;" src=""/>
- <span style="margin-right: 5px; _margin-right: 2px;"> 摘要摘要摘要摘要 </span>
- </div>
4.li 在 IE 中底部空行
问题说明: 当 li 里面有两个以上的浮动元素时, li 的下面就会产生一条空白间隙, 例如
- <ul class="tlist">
- <li>
- <span style="float: left;">
- 栏目
- </span>
- <a style="float: left;" href="#" target="_blank">
- 标题标题标题
- </a>
- </li>
- </ul>
解决方法: 这个问题和第一个问题很相似, 解决方法也是一样, 在 li 上加个垂直方向的属性, 例如:
- <ul class="tlist">
- <li style="vertical-align: top;"><span style="float: left;"> 栏目 </span>
- <a style="float: left;" href="#" target="_blank"> 标题标题标题 </a></li>
- </ul>
5.IE6 样式中文注释后引发失效
问题说明: 这是 ie6
出现的奇怪现象. 这是由于 CSS 和 HTML 的编码不同所引致, 满足下面条件就会引起注释下面的样式不起作用:
1). CSS 有中文注释
2). CSS 为 ANSI 编码
3). HTML 为 utf-8 编码
解决方法:
1). 去掉中文注释, 用英文注释或者多打几个 "*", 这是 ahuing 在之前的教程里提到的, 例如: /*** 注释 ***/
2). 统一 CSS 和 HTML 的编码
建议采用第二种解决方法. ps: CSS 为 uft-8 HTML 为 ANSI
貌似不会出现失效的情况.
来源: http://www.css88.com/qa/html5/14855.html