IE6常见兼容性问题

1、盒模型问题

(1)DTD问题

DTD:文档定义类型,规定了要遵循的书写规范。

如果不写DTD,高级浏览器还是可以正常加载,IE6会以怪异模式进行加载。

盒模型:正常应该是外扩的(实际占位会因为加了padding和border变大),IE6不写DTD是内减的(实际占位不变,padding和border的占位是向内的)。

这也是HTML5的兼容性问题之一。

解决方法:必须写DTD。

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

(2)不支持小于一个文字字号的高度的盒子

如果不设置文字字号,IE6中不支持高度低于19px的盒子。如果设置高度低于19px,以19px显示。

解决方法:

①设置盒子的内部文字字号为0。font-size: 0;

②给盒子设置高度,溢出高度的部分隐藏。overflow: hidden;

(3)a标签中图片的边框

如果一个插入图片(img标签),外层被a标签嵌套,IE6中图片会有一个蓝色的边框。

去掉边框的方法:清除img默认样式。

不论img图片是否放在a标签内,都给他清一下边框样式,将img的border设置为0或none。

(4)块级标签内的图片下边空隙问题

块级元素内如果嵌套img标签,高级浏览器会自动被图片撑开。IE6撑开时,底部多出一段距离。

解决方法:

给img图片转块。display: block

或者给父级元素添加高度,溢出隐藏。

2、浮动

(1)不浮动的元素不会钻空

同级元素如果一个元素浮动,一个元素不浮动,浮动的元素应该让出标准流位置,后面的元素占有这个位置。

高级浏览器中是压盖效果,浮动的盖住了没有浮动的。

IE6中并没有压盖,而是水平排列效果。

解决方法:

①同级元素要浮动都浮动,不能一部分浮动,一部分不浮动。

②制作压盖效果,用定位不要用浮动。

(2)3像素bug问题

一个元素浮动,一个元素不浮动,除了并排显示之外,两个元素之间还有一个3px的间距。

解决方法:

①不能一个浮动一个不浮动。

②如果必须一个浮动一个不浮动,还要解决3像素bug:给浮动的元素添加margin值为-3px,将距离拉近。

(3)双倍margin问题

如果一组元素全部进行浮动,而且每个元素都有同方向的margin-left外边距,IE6中第一个HTML元素与父级之间的margin距离是设置的值的两倍。

解决方法:

①不要用子级的margin去踹父亲,父子之间的间距用父级的padding挤出来,每个子元素设置与浮动方向相反的外边距。

 ul{

  list-style: none;

  width: 980px;

  height: 50px;

  padding-left: 20px;

  border: 5px solid red;

  margin: 100px auto;

  }

  ul li{

  float: left;

  width: 100px;

  height: 50px;

  background: yellowgreen;

  margin-right: 20px;

  }

②单独给IE6设置首个元素的外边距减半,其他浏览器默认为原值。IE6中减半的数值自动双倍。

 ul li{

  float: left;

  width: 100px;

  height: 50px;

  background: yellowgreen;

  margin-left: 20px;

  }

  ul li.first{

  _margin-left: 10px;

  }

(4)溢出隐藏清除浮动失效

overflow:hidden属性在清除浮动时 ,IE6中可能会失效。

不设置宽度和高度:清浮动效果失效。

解决方法:

给父盒子设置宽度:清浮动效果生效。

浏览器加载网页时,有两种布局加载机制。

有布局的机制:hasLayout,一个元素在加载时,自身的尺寸按照内部子元素、内容和自身设置的尺寸属性进行加载的。

没有布局的机制:自身元素加载时,相关尺寸按照父级元素的尺寸进行加载的。

如果要用溢出隐藏清除浮动,应该由子元素的数值决定父元素的数值,符合有布局的机制。

想要用溢出隐藏清除浮动:触发hasLayout机制。

触发方法:可以通过设置一些父盒子的有长度、数值的属性去触发。不一定每个有数值的属性每次都能触发成功机制。

有一个叫做zoom的属性,始终能触发有布局的机制。

zoom:放大镜。放大缩小盒子自身尺寸的属性。

属性值:数字。

放大或缩小显示时,按照盒子原始的自身宽高进行的缩放。必须要知道盒子的原始自身尺寸。

作为辅助清除浮动属性:属性值必须为1.

  div{

  border: 10px solid red;

  overflow: hidden;

  _zoom: 1;    只有IE6加载

 }

3、固定定位

IE6浏览器不支持固定定位。

解决方法:以后用js去模拟固定定位。

.box{
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background: red;
  position: fixed;
  top: 50%;
  left: 50%;
  _position:absolute;
  _top:expression(document.documentElement.scrollTop+document.documentElement.clientHeight/2-this.clientHeight/2);
  _left:expression(document.documentElement.clientWidth/2-this.clientWidth/2);
}

4、盒子透明

opacity盒子透明度属性在IE8及以下有兼容问题。

解决方法:IE浏览器有自己的透明度设置属性。

滤镜:filter。

属性值:有很多种滤镜效果的属性值,透明度属性只是其中一种。

透明度设置:

数值:0-100之间的整数,20表示透明度为20%,等价于opacity的0.2.

设置时两个数值必须保持一致。

opacity:0.2;
filter: alpha(opacity=20);

5、图片透明

插入图、背景图。

使用背景透明的图片:png、GIF。

IE6中:不支持背景图和插入图的透明和半透明的png图片。

解决方法:

①如果图片是只有透明,没有半透明,可以用GIF格式图片换掉png图片。

②通过给IE6浏览器单独加一段js代码,解决透明和半透明的问题。

 <!--[if IE 6]>

      <script src="js/iepng.js" type="text/javascript"></script>  //js的文件路径,必须写对。

      <script type="text/javascript">

     EvPNG.fix('div,ul,img,li,input,span,b,h1,h2,h3,h4');   //处理图片透明的标签的选择器。

      </script>

 <![endif]-->

注:这一段代码的书写位置,最好写在HTML结构的最后面。

IE浏览器兼容问题(下)——IE6的常见问题的更多相关文章

  1. 360浏览器兼容模式下jsp页面访问不到js文件

    360浏览器兼容模式下jsp页面访问不到js文件 查看自己js中的语法问题,不要用ES6的语法,编译不了故找不到js文件 const var of 码出高效 java 比较 所有整型包装类对象之间值的 ...

  2. 360浏览器兼容模式下IE内核版本

    问题 最近在跟客户演示系统时,自己电脑IE 11下好好的,我们web系统最低支持到IE9.在客户电脑上,IE9浏览器下可以正常浏览,但是360兼容模式下,页面什么也不显示. 通过F12调试工具发现,3 ...

  3. QQ浏览器兼容模式下Cookie失效 导致的NetCore Cookie认证失效

    最近在写NetCore项目采用的是NetCore的Cookie认证.结果偶然发现QQ浏览器登录不好用.这里先需要了解一下set-cookie中的SameSite属性  导致原因 首先Fiddler 4 ...

  4. wordpress通过代码禁用IE8, IE9,IE10等IE浏览器兼容视图模式(Compatibility View)

    目前wordpress主流主题大多都放弃了对IE6的支持!甚至IE6,IE7,IE8等的兼容模式也不支持!目前特别是国内的双核浏览器大多数使用使用IE内核都是使用的兼容模式!那将是非常糟糕!如何让IE ...

  5. javascirpt的json.stringify()方法在IE浏览器兼容性模式下出错的原因与解决办法

    今天开机混底薪的时候遇到一个JSON.stringify()在IE浏览器兼容模式下的问题. 问题描述 一个弹窗选择的功能原来好好的,突然就不行了. 想要调试调试不了,报错信息也看不到(一开F12这破I ...

  6. Angularjs在360兼容模式下取数据缓存问题解决办法

    测试提了一个bug,在360浏览器兼容模式下,删除页面数据需要手动刷新浏览器才能看到最新的数据.首先要复现当时的问题,很容易就复现了,但是发现在360浏览器兼容模式下无法打开开发者工具.好在经过反复重 ...

  7. flex与相对定位在国内双核浏览器极速模式下的兼容性问题

    在国内的浏览器中,360浏览器,QQ浏览器等绝大部分都是双核浏览器.双核浏览器即拥有IE兼容内核和非IE极速内核两个内核,分别对应兼容模式和极速模式.兼容模式时使用IE内核,极速模式采用webkit内 ...

  8. IE6浏览器兼容问题及部分解决方案(网上整理)

    作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...

  9. 前端编程提高之旅(三)----浏览器兼容之IE6

    在爱奇艺实习期间,乐帝主要负责移动端活动页面的制作,因为移动浏览器是随着智能手机兴起的,这就决定了移动端不会重蹈浏览器兼容问题的覆辙.一開始就比較好的支持web标准,而纵观整个互联网行业,移动web开 ...

随机推荐

  1. Java框架-mybatis01查询单个数据

    1.什么是mybatis? mybatis是一个基于Java的持久层框架. 2.持久化:数据从瞬时状态变为持久状态. 3.持久层:完成持久化工作的代码块.---dao 4.Mybatis是帮助程序员将 ...

  2. Oracle 维护数据的完整性 一 约束

    简介:约束用于确保数据库满足特定的商业规则.在Oracle中,约束包括以下几种: 1.not null      非空约束       该劣质不能为null 2.unique       唯一约束   ...

  3. selenium+Python(Js处理click失效)

    有时候元素明明已经找到了,运行也没报错,点击后页面没任何反应.这种问题遇到了,是比较头疼的,因为没任何报错,只是 click 事件失效了. 问题: 1.在练习百度的搜索设置按钮时,点保存设置按钮,al ...

  4. RPC的故事

    今天我跟几个RPC框架之间发生了一些事,情节跌宕起伏一波三折,不吐不快,以至于我这个从来不写博客的人也忍不住写下来分享一下. 背景 主系统部署在Windows上(.NET 4.5),子系统(.NET ...

  5. 关于在真实物理机器上用cloudermanger或ambari搭建大数据集群注意事项总结、经验和感悟心得(图文详解)

    写在前面的话 (1) 最近一段时间,因担任我团队实验室的大数据环境集群真实物理机器工作,至此,本人秉持负责.认真和细心的态度,先分别在虚拟机上模拟搭建ambari(基于CentOS6.5版本)和clo ...

  6. Jquery执行效率提高的方法

    1.选择器性能排行:$("#ID") > $("Tag") > $(".Class") > $("[attrib ...

  7. 查找正序排列的List中缺失的日期数据的一个算法

    Code: public List<DateTime> getMissDateData() { DateTime[] keys = { DateTime.Now.AddDays(-5), ...

  8. Windows Server 2008系统中IE8启用和禁用JS

    Windows Server 2008系统中IE8默认是启用IE ESC(ie 增强)的,这样会导致该IE不支持JS,开启方法: 1.开始->管理工具->服务器管理器 2.点击服务器管理- ...

  9. wcf datetime json format

    wcf 内置的json序列化工具,有时需要替换,或者特殊情况的处理,需要修改. 我也遇到了Dto属性类型是datetime,json的反序列化 和 序列号不友好. 这是国外网站的一个方案:Replac ...

  10. Silverlight & Blend动画设计系列四:倾斜动画(SkewTransform)

    Silverlight中的倾斜变化动画(SkewTransform)能够实现对象元素的水平.垂直方向的倾斜变化动画效果.我们现实生活中的倾斜变化效果是非常常见的,比如翻书的纸张效果,关门开门的时候门缝 ...