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

#兼容问题目录
8、IE6不支持固定定位
9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙
10、IE6下双边距问题
11、IE67下父级有边框，子级有margin的话会不起作用
12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）
13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效
14、IE6下文字溢出的问题
15、IE67li间隙问题

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

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

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

#8、IE6不支持固定定位

可以用js来解决

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{height: 3000px;}div{width: 100px;height: 100px;background: red;/*position: fixed;right: 0;bottom: 0;*/position: absolute;right: 0;top: 0;}</style><script>window.function(){var div1=document.getElementById("div1");window.onscroll=function(){var top=document.documentElement.scrollTop||document.body.scrollTop;var bottomPos=document.documentElement.clientHeight-div1.offsetHeight;div1.style.top=top+bottomPos+'px';}};</script></head><body><!--IE6不支持固定定位，可以用js来解决--><div id="div1">kaivon</div></body>
</html>

#9、IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙

解决办法
给后面元素也添加浮动

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{width: 100px;height: 100px;background: red;float: left;}span{background: red;float: left;}</style></head><body><!--IE6下前面元素浮动，后面元素不浮动后他们之间会有间隙解决办法给后面元素也添加浮动--><div>kaivon1</div><span>kaivon2</span></body>
</html>

#10、IE6下双边距问题

解决方法
给元素添加display:inline;

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>body{margin: 0;}span,div{width: 100px;height: 200px;background: red;/*margin-left: 50px;float: left;*/margin-right: 50px;float: right;display: inline;}</style></head><body><!--IE6下块元素有浮动，并且有横向margin(左右)，那最终的距离是原来的两倍解决方法给元素添加display:inline;--><div></div><!--<span></span>--></body>
</html>

#11、IE67下父级有边框，子级有margin的话会不起作用

解决办法
触发父级的layout

Layout布局出发方式链接：http://blog.csdn.net/baidu_37107022/article/details/71640304

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.parent{border: 1px solid #f00;zoom: 1;}.parent div{width: 100px;height: 100px;margin: 100px;background: green;}</style></head><body><!--在IE67下，父级有边框，子级有margin，那子级的margin会不起作用解决办法触发父级的layout--><div class="parent"><div></div></div></body>
</html>

#12、IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效（IE7不管相差多少，直接失效）

解决方法
用padding解决

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.box{width: 500px;width: 480px;width: 483px;margin: 50px auto;border: 10px solid #000;overflow: hidden;padding-bottom: 10px;}.box div{width: 100px;height: 100px;background: greenyellow;float: left;margin: 10px;margin: 10px 10px 0 10px;display: inline;}</style></head><body><!--IE6下，每行元素的宽度与父级的宽度相差超过2px，最后一行的margin-bottom会失效IE7下，不管宽度相差多少，直接失效解决方法用padding解决--><div class="box"><div class="div">1</div><div class="div">2</div><div class="div">3</div><div class="div">4</div><div class="div">1</div><div class="div">2</div><div class="div">3</div><div class="div">4</div><div class="div">1</div><div class="div">2</div><div class="div">3</div><div class="div">4</div></div></body>
</html>

#13、IE6下元素中除了文字之外，还有inline-block类型元素，元素的行高会失效

解决办法：
分别包起来，分别设置行高

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>div{height: 300px;line-height: 300px;border: 1px solid #f00;}/*span{height: 100px;background: red;display: inline-block;line-height: 100px;}*/.span1{line-height: 100px;display: inline-block;background: red;}.span2{line-height: 200px;display: inline-block;background: green;}</style></head><body><!--在IE6下，元素中除了文字之外，还有inline-block类型元素，那元素的行高会失效解决办法： 分别包起来，分别设置行高--><!--<div><span>inlin-block</span>这是一段文字</div>--><div><span class="span1">inlin-block</span><span class="span2">这是一段文字</span></div></body>
</html>

#14、IE6下文字溢出的问题

解决办法
1、把注释或者行内元素用div包起来
3、把父级的宽度加3px

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>.wrap{width: 400px;/*width: 403px;*/}.left{float: left;}.right{float: right;width: 400px;}</style></head><body><!--在IE6下，两个浮动元素中间有注释或者空行内标签，父级的宽度和子元素宽度相差小于3px，元素内的文字会被复制出来解决办法1、把注释或者行内元素用div包起来3、把父级的宽度加3px--><div class="wrap"><div class="left"></div><!--这里是一段注释--><div class="right">这里要多出来一个文字</div></div></body>
</html>

#15、IE67 li间隙问题

解决办法
1、给li加vertical-align: middle;
2、给li浮动

代码演示

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>ul{margin: 0;padding: 0;list-style: none;width: 200px;}li{width: 200px;height: 30px;border: 1px solid #f00;/*vertical-align: middle;*/float: left;}li span{float: left;}li a{float: right;}</style></head><body><!--IE67下，li里有左右浮动的元素，会造成每个li下边有间隙的问题解决办法1、给li加vertical-align: middle;2、给li浮动--><ul><li><span>标题</span><a href="#">更多</a></li><li><span>标题</span><a href="#">更多</a></li><li><span>标题</span><a href="#">更多</a></li><li><span>标题</span><a href="#">更多</a></li></ul></body>
</html>

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

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）常见兼容问题处理【02】

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

最新文章

热门文章