IE浏览器兼容问题(下)——IE6的常见问题
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的常见问题的更多相关文章
- 360浏览器兼容模式下jsp页面访问不到js文件
360浏览器兼容模式下jsp页面访问不到js文件 查看自己js中的语法问题,不要用ES6的语法,编译不了故找不到js文件 const var of 码出高效 java 比较 所有整型包装类对象之间值的 ...
- 360浏览器兼容模式下IE内核版本
问题 最近在跟客户演示系统时,自己电脑IE 11下好好的,我们web系统最低支持到IE9.在客户电脑上,IE9浏览器下可以正常浏览,但是360兼容模式下,页面什么也不显示. 通过F12调试工具发现,3 ...
- QQ浏览器兼容模式下Cookie失效 导致的NetCore Cookie认证失效
最近在写NetCore项目采用的是NetCore的Cookie认证.结果偶然发现QQ浏览器登录不好用.这里先需要了解一下set-cookie中的SameSite属性 导致原因 首先Fiddler 4 ...
- wordpress通过代码禁用IE8, IE9，IE10等IE浏览器兼容视图模式（Compatibility View）
目前wordpress主流主题大多都放弃了对IE6的支持!甚至IE6,IE7,IE8等的兼容模式也不支持!目前特别是国内的双核浏览器大多数使用使用IE内核都是使用的兼容模式!那将是非常糟糕!如何让IE ...
- javascirpt的json.stringify()方法在IE浏览器兼容性模式下出错的原因与解决办法
今天开机混底薪的时候遇到一个JSON.stringify()在IE浏览器兼容模式下的问题. 问题描述 一个弹窗选择的功能原来好好的,突然就不行了. 想要调试调试不了,报错信息也看不到(一开F12这破I ...
- Angularjs在360兼容模式下取数据缓存问题解决办法
测试提了一个bug,在360浏览器兼容模式下,删除页面数据需要手动刷新浏览器才能看到最新的数据.首先要复现当时的问题,很容易就复现了,但是发现在360浏览器兼容模式下无法打开开发者工具.好在经过反复重 ...
- flex与相对定位在国内双核浏览器极速模式下的兼容性问题
在国内的浏览器中,360浏览器,QQ浏览器等绝大部分都是双核浏览器.双核浏览器即拥有IE兼容内核和非IE极速内核两个内核,分别对应兼容模式和极速模式.兼容模式时使用IE内核,极速模式采用webkit内 ...
- IE6浏览器兼容问题及部分解决方案（网上整理）
作为一个初涉前端技术的IT菜鸟,IE浏览器的兼容问题是一个不得不跨越的坎.为了能够在不同浏览器达到同样的显示效果,就不得不花心思想出办法实现兼容.由于各大主流浏览器内核不同,各自的实现标准有所差异,因 ...
- 前端编程提高之旅（三）----浏览器兼容之IE6
在爱奇艺实习期间,乐帝主要负责移动端活动页面的制作,因为移动浏览器是随着智能手机兴起的,这就决定了移动端不会重蹈浏览器兼容问题的覆辙.一開始就比較好的支持web标准,而纵观整个互联网行业,移动web开 ...
随机推荐
- proxy的作用
get() get方法用于拦截某个属性的读取操作,可以接受三个参数,依次为目标对象.属性名和 proxy 实例本身(严格地说,是操作行为所针对的对象),其中最后一个参数可选. get方法的用法,上文已 ...
- input输入提示历史记录
一般便于用户的输入习惯,我们都会提示历史消息,让用户有更好的使用体验,以前可能比较多朋友会用js来实现,现在HTML5的datalist可以轻松帮我们实现这个功能!只需以下几行代码 <!doct ...
- 鹅厂优文|主播pk，如何实现无缝切换？
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文作者,rexchang(常青),腾讯视频云终端技术总监,2008 年毕业加入腾讯,一直从事客户端研发相关工作,先后参与过 PC QQ.手 ...
- 关于android studio2.3和android studio3.0
今天又重新把androidstudio2.3重新装上了,实在是受不了android studio3.0了,太恶心人了 说一下为何改用android studio3.0: 优点: 1. 如果只是写纯应用 ...
- 「Sdchr 的邀请赛」题解
骗个访问量.. A:取石子 将点 x 与点 x / prime 连边,那么这个图可以由指数之和的奇偶性来划分成一个二分图. 接下来考虑推广阶梯 NIM (或者这原本就是阶梯 NIM ?),必胜当且仅当 ...
- bzoj 5252: [2018多省省队联测]林克卡特树
Description 小L 最近沉迷于塞尔达传说:荒野之息(The Legend of Zelda: Breath of The Wild)无法自拔,他尤其喜欢游戏中的迷你挑战. 游戏中有一个叫做& ...
- hihocoder #1529 : 不上升序列
Description 给定一个长度为 n 的非负整数序列 a[1..n]. 你每次可以花费 1 的代价给某个 a[i] 加1或者减1. 求最少需要多少代价能将这个序列变成一个不上升序列. Solut ...
- Centos 从零开始 (四)
12:nginx架设 rtmp直播 首先在之前 所安装的nginx是用 yum 源安装的.却不能为nginx添加他的模块 所以要用wget来下载源文件 来进行源码配置与安装.开搞 [root@loca ...
- sql 表插锁 解锁
--查锁 select request_session_id spid,OBJECT_NAME(resource_associated_entity_id) tableName from sys.dm ...
- C#泛型List的介绍
一.List<T>描述 1).表示可通过索引访问的对象的强类型列表:提供用于对列表进行搜索.排序和操作的方法.2).是ArrayList类的泛型等效类.3).可以使用一个整数索引访问此集合 ...