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.onload=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前端流程以及学习中常见的误区
学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理.没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间.精力.金钱.废话不 ...
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 【转】Web前端浏览器兼容初探
原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...
- Web前端浏览器兼容初探
浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...
- [转]Web前端浏览器兼容
转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...
- web前端~~浏览器兼容问题（百度）
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 浅谈Web前端浏览器兼容问题
对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同 ...
- Web前端浏览器兼容问题
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- Web前端浏览器兼容性个人经验总结
前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- NOIP2015游记——一次开心又失望的旅行
啊,一年一度的NOIP终于是结束了 以前的大神都有写自己的感受 然而我居然给忘了!!!! 吓得我赶紧来写一份游记 Day.-INF--出发前一个星期 机智的我选择了停课 就是为了OIER这伟大而又光荣 ...
- MongDB系列(一)：使用node.js连接数据库
1.首先启动mongodb数据库服务器 2.创建app.js,代码如下: /** * Created by byzy on 2016/8/18. * node.js 连接 mongodb实例 */ / ...
- java复习(6)---异常处理
JAVA异常处理知识点及可运行实例 接着复习java知识点,异常处理是工程中非常重要的. 1.处理异常语句: try{ .... }catch(Exception e){ ..... } finall ...
- nginx源码分析——http模块
源码:nginx 1.12.0 一.nginx http模块简介 由于nginx的性能优势,现在已经有越来越多的单位.个人采用nginx或者openresty. ...
- 想成为Java高级工程师的看过来
想成为Java高级工程师,有哪些要求呢? 1.Core Java,就是Java基础.JDK的类库,很多童鞋都会说,JDK我懂,但是懂还不足够,知其然还要知其所以然,JDK的源代码写的非常好,要经常查看 ...
- xmlplus 组件设计系列之五 - 选项卡
这一章将设计一个选项卡组件,选项卡组件在手持设备上用的比较多,下面是一个示意图: 选项卡组件的分解 在具体实现之前,想像一下目标组件是如何使用的,对于设计会有莫大的帮助.通过观察,可以将选项卡组件分为 ...
- Less和Sass的使用
[Less中的变量] 1.声明变量:@变量名:变量值; 使用变量:@变量名 @length:100px; @color:yellow; @opa:0.5; >>>Less中变量的类 ...
- 我拖拖拖--H5拖放API基础篇
不要搞错,本文不是讲如何拖地的.看过<javascript精粹>朋友应该知道,他实现拖放的过程比较复杂,现在时代不同了,我们用H5的新的拖放API就能非常方便的实现拖放效果了.最近在园子见 ...
- stl_各容器的总结
一.stl容器总结: 1.以下的操作是在一千万的数据下操作.copy 都是在足够的空间下进行的copy, 测量方式: std::clock_t start = std::clock(); //待测代码 ...
- Xcode旧项目引入CocoaPod遇到的问题与解决
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...