WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】

#兼容问题目录

16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
17、IE6下同一层级的浮动元素会盖住绝对定位元素
18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
20、IE67下输入类型的表单控件，上下两边各有1px的间隙
21、IE8以及IE8之前不识别H5标签
22、IE6不支持png透明图片

后续兼容性问题处理链接地址

http://blog.csdn.net/baidu_37107022/article/details/71972223

http://blog.csdn.net/baidu_37107022/article/details/71973570

#16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的

解决办法
给父级也加相对定位

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>#box{width: 200px;height: 200px;border: 5px solid #f00;overflow: hidden;position: relative;}#box div{width: 300px;height: 300px;background: green;position: relative;}</style></head><body><!--IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的解决办法给父级也加相对定位--><div id="box"><div></div></div></body>
</html>

#17、IE6下同一层级的浮动元素会盖住绝对定位元素

解决办法
给定位元素外面嵌套一个层

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;border: 5px solid #f00;position: relative;}.box div{width: 150px;height: 150px;background: green;float: left;display: inline;margin-left: 50px;}span{width: 100px;height: 100px;background: yellow;position: absolute;right: 0;top: 0;}</style></head><body><!--IE6下同一层级的浮动元素会盖住绝对定位元素解决办法给定位元素外面嵌套一个层--><div class="box"><div></div><!--<span>kaivon</span>--><p><span>kaivon</span></p></div></body>
</html>

#18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差

无法解决

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;border: 10px solid #f00;position: relative;}.box div{width: 50px;height: 50px;background: green;position: absolute;right: -10px;bottom: -10px;/*left: -10px;top: -10px;*/}</style></head><body><!--在IE6下，定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差--><div class="box"><div></div></div></body>
</html>

#19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉

解决方法
给元素添加相对定位，或者给父级overflow:hidden;

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.box{width: 200px;height: 200px;border: 1px solid #f00;}.box div{width: 100px;height: 100px;background: green;margin: -10px 0 0 -10px;}</style></head><body><!--IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉解决方法给元素添加相对定位，或者给父级overflow:hidden;--><div class="box"><div></div></div></body>
</html>

#20、IE67下输入类型的表单控件，上下两边各有1px的间隙

解决办法
给控件加浮动

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{border: 1px solid #f00;overflow: hidden;zoom: 1;}div input{float: left;}</style></head><body><!--IE67下输入类型的表单控件，上下两边各有1px的间隙解决办法给控件加浮动--><div><input type="text" /></div></body>
</html>

#21、IE8以及IE8之前不识别H5标签

无法解决

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script>document.createElement('header');document.createElement('nav');</script><script src="js/html5shiv.min.js"></script><style>header{width: 100px;height: 100px;background: red;/*display: block;*/}nav{width: 200px;height: 200px;background: green;}</style></head><body><!--IE8以及IE8之前不识别H5标签--><header>头部</header><nav>导航</nav></body>
</html>

#22、IE6不支持png透明图片

使用插件

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/DD_belatedPNG_0.0.8a.js"></script><script>DD_belatedPNG.fix('img,div');</script><style>body{background: #ccc;}div{width: 300px;height: 300px;background:url(img/1.png);}</style></head><body><!--IE6不支持png-24透明图片--><img src="img/1.png"/><div></div></body>
</html>

导入插件处理

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/DD_belatedPNG_0.0.8a.js"></script><script>DD_belatedPNG.fix('body');/** 这个插件不支持body的背景*/</script><style>/** 用滤镜的话就必需给body高度*/body{height: 500px;background: #ccc url(img/1.png) no-repeat;_background-image:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/1.png", sizingMethod="crop");}</style></head><body></body>
</html>

WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】相关推荐

Web前端人员如何面试？常见vue面试题有哪些？
Web前端人员如何面试?常见vue面试题有哪些?vue是一套用于构建用户界面的渐进式JavaScript框架,也是初创项目的首选前端框架.很多企业在招聘前端工程师时都会考察其对vue的了解,接下来小编 ...
WEB前端浏览器兼容性问题(PC端及移动端)
WEB前端浏览器兼容性问题(pc端及移动端) PC端 (一)html部分1.H5新标签在IE9以下的浏览器识别 <!--[if lt IE 9]> <script type=&quo ...
web前端——浏览器兼容问题
[1]为什么会出现浏览器兼容问题在各大浏览器厂商的发展过程中,它们对web的标准各有不同的实现,标准不同存在差异所以产生兼容性的问题. [2]浏览器内核以及代表作品 IE浏览器内核:Trident内 ...
WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
为什么会有兼容问题? 由于浏览器种类众多,不同的浏览器其内核亦不尽相同,故各个浏览器对网页的解析有一定出入,这也是导致浏览器兼容问题出现的主要原因,我们的网页需要在主流浏览器上正常运行,就需要做好浏览 ...
WEB前端浏览器兼容问题处理
问题一:不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大. 碰到频率:100% 解决方案:css里 *{margi ...
【海码学院】web前端基础入门CSS之常见CSS兼容问题学习笔记
一.兼容性处理要点 1.DOCTYPE 影响 CSS 处理: 2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important ...
web前端-浏览器兼容性处理大全
1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题两上下排列或嵌套的div,上面的div设置高度(height),如果d ...
Selenium 3.x如何启动3种浏览器（Chrome/Firefox/IE）
博文章节博文章节本机环境介绍 Selenium 3x对于Chrome启动的改变 Selenium 3x对于Firefox启动的改变 Selenium 3x对于IE启动的改变拓展延伸本机环境介绍 ...
Python全栈（九）Web前端基础之3.CSS常见样式和选择器
文章目录一.CSS常见样式 1.常见文本样式 2.列表常见样式 3.背景样式 4.浮动样式二.CSS常用选择器 1.CSS元素选择器介绍 2.元素选择器 3.id选择器 4.类选择器 5.通配选择 ...
web前端(5)：了解jQuery(常见选择器+相关尺寸+元素/节点操作)
文章目录一.jQuery是什么二.JQuery的常见选择器三.JQuery的元素操作四.相关尺寸函数五.常用的事件方法 1. 绑定事件的两种方式 2.解除绑定六.节点操作七.经典案例 1 ...

WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】

WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理【03】相关推荐

最新文章

热门文章