IE6虽然随着XP系统退出市场在国外基本基本消失，但是在国内依然占据很大的市场份额。政务网站、页游官网等依然要考虑到IE6用户的体验。如果你的网站使用CSS3等“新技术”时，就必须果断放弃IE6的兼容。

IE6不支持兄弟选择器和多类选择器，使用时一定要注意。

  • 浏览器添加默认样式

问题：

有些浏览器会给浏览器添加默认样式，而且不同浏览器添加的样式不同，导致布局在不同浏览器发生不同的错乱。

解决：

清楚默认样式，保证不同浏览器样式统一。（百度中有很多不错的清除样式模板）以下是我自己常用的清除样式文件：

 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,dl, dt, dd, ul, ol, li,pre,fieldset, button, input, textarea,th, td { margin:;padding:;}/* 设置默认字体 */

 body,button, input, select, textarea { /* for ie */ font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif; /* 用 ascii 字符表示，使得在任何编码下都无问题 */ }

 h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }

 h2 { font-size: 16px; }

 h3 { font-size: 14px; }

 h4, h5, h6 { font-size: 100% }

 img { height: auto;vertical-align: middle;border: 0 none;}

 address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */

 code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */

 small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */

 ul, ol { list-style: none; }

 /* 重置文本格式元素 */

 a { text-decoration: none; }

 abbr[title], acronym[title] { /* 注：1.ie6 不支持 abbr; 2.这里用了属性选择符，ie6 下无效果 */ border-bottom: 1px dotted;cursor: help;}

 q:before, q:after { content: ''; }

 /* 重置表单元素 */

 legend { color: #000; } /* for ie6 */

 fieldset, img { border: none; } /* img 搭车：让链接里的 img 无边框 */

 /* 注：optgroup 无法扶正 */

 button, input, select, textarea { font-size: 100%; margin:;vertical-align: baseline; /* 使得表单元素在 ie 下能继承字体大小 */ }

 table {border-collapse: collapse;border-spacing:;}

 hr {border: none;height: 1px;}

 /* 让非ie浏览器默认也显示垂直滚动条，防止因滚动条引起的闪烁 */

 html { overflow-y: scroll;}

 body{font: 14px/1.5 arial,"Microsoft Yahei","Hiragino Sans GB",sans-serif;color: #8C8C8C;}

  • img标签底部间隙

问题：

div中包含一张图片，底部可能有2px、4px或更多的间隙，不同的font-size会影响间隙的大小。

解决：

  1. 将图片的垂直对齐方式vertical-align值设为top或bootm
  2. 将图片转化为块元素，display:block;
  3. 将包含图片的父容器字体大小设为0，font-size:0;

  • img在IE有蓝色边框

问题：

img标签在IE6-IE10加了超链接（a标签）后蓝色边框

解决：

img{border:0;}

  • margin上下边距合并

问题：

同时给上下容器添加上下边距会出现边距合并问题（合并最大的值）

解决：

不要同时给两个上下边距，只给一个就好。

  • margin-top没有加到指定元素上

问题：

在容器中给子元素一个margin-top没有想要的效果。

解决：

  1. 给父元素一个透明的像素边框 border:1px solid rgba(0,0,0,0);
  2. 通过给父元素一个padding-top来模拟margin-top。

  • IE6双倍边距

问题：

给浮动元素加margin-left时IE6会出现双倍边距。

解决：

给浮动元素display:inline;

  • 子元素浮动时父元素高度为0

问题：

父元素高度不确定，子元素浮动时，父元素高度变为0。浮动子元素层级高于父元素导致撑不开父元素。

解决：

  1. 父容器添加overflow:hidden;
  2. 在子元素后添加一个空div清除浮动 <div style="height:0;overflow:hidden;clear:both;"></div>

  • IE6不支持固定定位

问题：

IE6不支持position:fixed;

解决：

 选择器{width: 200px;height: 200px;background: red;position: fixed;bottom: 50px;right: 50px;*position: absolute;*top: expression(eval(document.documentElement.scrollTop+200));}

 *html{background-image: url("blank:about");background-attachment: absolute;}

  • IE6不支持png透明

问题：

IE6下png透明度不支持

解决：

background-image:url(123.png); _background:none; _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里面的元素发生了浮动。

解决：

  1. li不设置宽高。
  2. li内部元素不浮动。

  • a链接点击时有蓝色边框

问题：

a链接点击时有蓝色边框。

解决：

a:focus { outline: none 0; }

  • li在IE6自适应消失

问题：

如果li中有块元素在IE6下虽然浮动，默认宽度是100%而不是自适应。

解决：

  1. li设置固定宽度
  2. display:inline_block;

常见的IE6兼容以及css兼容的更多相关文章

  1. Javascript兼容和CSS兼容总结

    javascript部分 1. document.form.item 问题问题:代码中存在 document.formName.item(“itemName”) 这样的语句,不能在FF下运行解决方法: ...

  2. js和css兼容问题

    (一)html部分 1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]>  <script type="text/javascript" s ...

  3. DIV+CSS IE6/IE7/IE8/FF兼容问题汇总

    1.IE8下兼容问题,这个最好处理,转化成ie7兼容就可以.在头部加如下一段代码,然后只要在IE7下兼容了,IE8下面也就兼容了 <meta http-equiv="x-ua-comp ...

  4. ie6,ie7,ie8 css bug兼容解决记录

    ie6,ie7,ie8 css bug兼容解决记录 转载自:ie6,ie7,ie8 css bug兼容解决记录 - 前端开发 断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面 ...

  5. ie6 7 8 9 firefox的css兼容问题

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. DIV+CSS IE6/IE7/IE8/FF兼容问题大全

    1. [代码][CSS]代码 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居 ...

  7. CSS兼容IE6 IE7 IE8 IE9 Firefox的总结

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 解决ie6上碰到的css兼容问题

    ie6上css碰到的坑 前两天在给一个项目做东西的时候,碰到一个有意思的项目,是需要兼容ie6,有一些碰到并且解决的问题,给大家写下来,方便大家以后碰到类似的问题哈- 喜欢的话还请点赞! 1.impo ...

  9. IE6的那些css常见bug（汇总）

    IE6的那些css常见bug(汇总) 我的微博终于在前几天建立了 虽说很早之前就知道博客园这个地方 但怕自己不能坚持去写一些东西一直没有建.这几天 我做了这个决定 把我的博客建起来 每周发一些看到的, ...

随机推荐

  1. Azure 媒体服务支持 DASH 实时传送流

    Kilroy Hughes Azure媒体服务数字媒体架构师 本文重点介绍 Azure 媒体服务支持的 DASH 实时传送流功能,同时阐述如何利用这些功能将实时和点播自适应流传送至 Web 浏览器 ...

  2. 在User Profile Service中配置AD的同步连接

    转:http://www.360sps.com/Item/ConfigureSynchronizationConnections.aspx 如果要将Active Directory.LDAP 目录和业 ...

  3. Tdxtreelist 行变色

    ACanvas.Font.Color := clRed;   //如果有加印的  变颜色

  4. POJ 2249

    #include<stdio.h> longlong sum; int main() { int k,n,m; while(~scanf("%d%d",&n,& ...

  5. js定义函数的几种结构形式

    1.函数声明 function name(参数) { 执行的代码 } 2.函数表达式 也称匿名函数 var x = function (参数) { 执行的代码 }; //第二种方式按照完整的语法需要在 ...

  6. 一个赴美的应届毕业生Kevin，在美国做程序员的访谈

    作者MUM计算机   转载请注明 在国内IT市场人才日渐饱和且竞争激烈的今天,作为一名代号996的程序猿,你是否也会对赴美工作心生向往呢?作为国内普通院校的应届本科生年薪就能轻松破40万 (人民币), ...

  7. Phonegap3.4 教程

    英文原扯:http://coenraets.org/blog/cordova-phonegap-3-tutorial/ 我只是对着原文学习一遍,记录在这里,一来为了加深印象(边翻译边学习),二来为了自 ...

  8. Java笔记(三十)……正则表达式

    概述 符合一定规则的表达式 专门用于操作字符串 特点: 用于一些特定的符号来表示一些代码操作,这样就可以简化书写 所以学习正则表达式,就是在学习一些特殊符号的使用 好处: 可以简化对字符串的复杂操作 ...

  9. HW5.24

    import java.util.Calendar; public class Solution { public static void main(String[] args) { System.o ...

  10. nyoj 1022 最少步数【优先队列+广搜】

    最少步数 时间限制:3000 ms  |  内存限制:65535 KB 难度:4   描述 这有一个迷宫,有0~8行和0~8列: 1,1,1,1,1,1,1,1,1 1,0,0,1,0,0,1,0,1 ...