IE浏览器兼容问题(下)——IE6的常见问题
2018-06-24 01:38:13来源:未知 阅读 ()
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结构的最后面。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题 2020-05-31
- 关于浏览器兼容问题 2020-05-27
- 安装了https ssl证书,但浏览器显示并非完全安全(此页面内 2020-05-12
- 谷歌浏览器安装和开发者工具 2020-05-04
- 解决微信小程序引用echarts视图模糊的问题 2020-04-24
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash