IE6兼容笔记

meislzhua 发布于2019-08-01 18:43 / 1562人阅读

摘要：如果都已经淘汰，虽说也极少数企业单位会用到低版本的深坑浏览器，不过基本上现在做前端开发都较少去兼容的低端浏览器。现在仅仅是把当初的一个笔记记录一下。

如果IE678都已经淘汰，虽说也极少数企业单位会用到IE低版本的深坑浏览器，不过基本上现在做web前端开发都较少去兼容IE的低端浏览器。想想当初学习web前端，不可避免的要了解关于IE浏览器兼容方面上的处理，即使在工作以后，基本上也没有处理过IE低版本浏览器的兼容问题。现在仅仅是把当初的一个笔记记录一下。

1.兼容IE6背景图片透明

第一种方法：把图片更换为png-8图片
第二种方法：在head标签下引入js代码

2.ie6下margin双倍问题

IE6会在特定的条件下，将设置的横向margin值变成双倍。条件：
1.元素必须浮动（float）;
2.元素必须具有横向margin，margin-left、margin-right
3.元素必须块元素
4.浏览器必须是ie6

解决方案 设置浮动元素的_display:inline;

注意：IE6双边距产生是父子之间、兄弟之间不会产生
示例（ietester 测试 ie6）：

测试结果：

3.a的伪类hover兼容问题

这个来源网络

4.IE6支持hover解决方案(除a标签)

在IE6下除了a标签有hover效果外，其他标签是没有hover效果，为了解决这个问题，则可以引入一个文件（csshover.htc）来处理：
只要在body标签下引入htc文件，如：

body{
    behavior:url("csshover.htc");
}

5.CSS背景透明兼容ie6样式

#element{
    opacity:0.5;
    filter:alpha(opacity=50);
}

6.inline-block兼容IE67

display:inline-block;
不支持IE6，7(注：针对块元素，行元素支持)

解决方法：
先让块元素变为内联，再使用（zoom:1 或float属性等）触发块元素layout
display:inline-block;
*display:inline;
*zoom:1;

代码示例

IE6下测试(IEtester工具)

7.ie6下最小高度19px

在ie6下设置元素最小高度小于19px无效

解决方法：overflow:hidden

8.ie6下绝对定位问题

ie6下绝对定位元素的父级宽高是奇数的时候元素的right和bottom值会相差1px
html代码：

IE6浏览器：

云服务器 GPU云服务器 IE6兼容兼容IE6 ie6兼容性解决ie6不兼容

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52039.html

前端笔记

摘要：一严格模式与混杂模式如何触发这两种模式，区分它们有何意义声明位于文档中的最前面的位置，处于标签之前。包含过渡和的也导致页面以标准模式呈现，但是有过渡而没有会导致页面以混杂模式呈现。不存在或形式不正确会导致和文档以混杂模式呈现。一：HTML+css 1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? Doctype声明位于文档中的最前面的位置，处于标签...

未东兴 2019-08-21 11:26 评论0 收藏0
前端笔记

摘要：一严格模式与混杂模式如何触发这两种模式，区分它们有何意义声明位于文档中的最前面的位置，处于标签之前。包含过渡和的也导致页面以标准模式呈现，但是有过渡而没有会导致页面以混杂模式呈现。不存在或形式不正确会导致和文档以混杂模式呈现。一：HTML+css 1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? Doctype声明位于文档中的最前面的位置，处于标签...

binta 2019-08-30 13:17 评论0 收藏0
前端笔记

摘要：一严格模式与混杂模式如何触发这两种模式，区分它们有何意义声明位于文档中的最前面的位置，处于标签之前。包含过渡和的也导致页面以标准模式呈现，但是有过渡而没有会导致页面以混杂模式呈现。不存在或形式不正确会导致和文档以混杂模式呈现。一：HTML+css 1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? Doctype声明位于文档中的最前面的位置，处于标签...

lk20150415 2019-08-01 16:09 评论0 收藏0
【零基础入门】 css学习笔记（3）选择器与层叠性

摘要：，高级选择器后代选择器空格表示后代选择器就是的后代所有的。注意是后代，并不一定是儿子空格可以出现多次补充后代选择器中出现的东西很灵活，可以是标签，可以是名，可以是名后代选择器，就是一种平衡共性特性的平衡。一，选择器 1，基础选择器 1）标签选择器：div{ } ，选择的所有，而不是一个，用来描述共性。 2）类选择器：.class名{ } 多个元素可以同时属...

cppprimer 2019-08-29 15:43 评论0 收藏0
前端学习笔记（CSS、JS基础篇）

摘要：搜索引擎中有一个爬虫模块，在页面中使用诸如等强调式的标签，有利于，说白了就是有利于被搜索到。定位相对定位不影响元素本身特性不使元素脱离文档流。定时器如果是由事件控制的，要先关再开，避免多次触发而混乱。 CSS篇注意：css注释使用/ /，而不是或者//，否则很容易导致不明错误！！！ div padding：内边距。盒子内容与盒子边框的距离设置，相当于给盒子加了厚度，使用此属性后会改...

caikeal 2019-08-19 17:57 评论0 收藏0