常见的IE6兼容以及css兼容

时间：2023-02-12 13:01:31

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&plus;CSS IE6&sol;IE7&sol;IE8&sol;FF兼容问题汇总

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

  4. ie6&comma;ie7&comma;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&plus;CSS IE6&sol;IE7&sol;IE8&sol;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. RQNOJ 490 环形石子合并

    题目链接:https://www.rqnoj.cn/problem/490 题目描述 在一个园形操场的四周摆放N堆石子,现要将石子有次序地合并成一堆.规定每次只能选相邻的2堆合并成新的一堆,并将新的一 ...

  2. &lbrack;团队项目2&period;0&rsqb;软件改进分析MathAPP

    软件改进分析 在此基础上,进行软件的改进. 首先,我们把这个软件理解成一个投入市场的.帮助小朋友进行算术运算练习的APP. 从质量保证的角度,有哪些需要改进的BUG? 从用户的角度(把自己当成小学生或 ...

  3. Photoshop图层混合模式计算公式大全（转）

    混合模式可以将两个图层的色彩值紧密结合在一起,从而创造出大量的效果.在这些效果的背后实际是一些简单的数学公式在起作用.下面我将介绍photoshop cs2中所有混合模式的数学计算公式.另外还介绍了不 ...

  4. javascript获取ckeditor编辑器的值&lpar;实现代码&rpar;

    CKeditor编辑器是FCKeditor的升级版本想对于FCK来说,确实比较好用,加载速度也比较快以下是如果通过JS获取CKeditor编辑器的值,用于表单验证 if(CKEDITOR.instan ...

  5. window mysql安装

    1.选择下载版本 接着上几篇文章再来看下windows下安装mysql. 我这里是windows7 64位, 安装过程中还是遇到一些坑,这里记录下. 一.下载安装包 打开mysql官网下载页面:htt ...

  6. Web 项目遇到的乱码问题

    问题代码: jsp: <%@ page language="java" contentType="text/html; charset=UTF-8" pa ...

  7. nodejs的事件轮询机制

    1.timers定时器阶段 执行定时器到点的回调函数(所有定时器setTimeout / setInterval的回调函数都在这个阶段执行) 2.idle prepare 准备阶段 TCP错误回调 3 ...

  8. c语言实验报告（四） 从键盘输入字符串a和字符串b，并在a串中的最小元素（不含结束符）后面插入字符串b&period;

    a串中最小元素后的字符被舍弃了. #include<stdio.h>#include<string.h>void main(){  int i,min=0;  char a[2 ...

  9. SqlHelper简单实现（通过Expression和反射）10&period;使用方式

    以下是整个SqlHelper的Demo: public Result<List<ArticleDTO>> GetIndexArticleList(int count, int ...

  10. springmvc的&commat;Validated&sol;&commat;Valid注解使用和BindingResult bindingResult

    关于@Valid和Validated的比较 @Valid是使用hibernate validation的时候使用 @Validated 是只用spring  Validator 校验机制使用 一:@V ...

相关文章