常见的IE6兼容以及css兼容

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

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 不支持 abbr; 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会影响间隙的大小。

解决:

  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;

解决:

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: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;

 

 

posted @ 2015-08-18 15:13  迈着小短腿的YY  阅读(1675)  评论(2编辑  收藏  举报