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上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- node.js前后台交互示例 -- 使用node.js实现用户注册功能
node.js环境自行搭建,参考菜鸟教程的node.js就可以. 1 通过ajax提交index.html中form表单 register.html文件如下: <!doctype html> ...
- struts2 之 struts2数据处理
开门见山,struts2的数据处理总结: 1. 在servlet中,如果要获取页面提交的数据要使用requerst.getParameter方法来获取,并且每次需要进行相关的类型转换工作,数据的获取及 ...
- 移动设备真机调试本地程序的Node.js【无需连wifi】
前提: 在某些场景下,我们需要调试我们的Node.js,这很简单,很多编辑器都集成了debug模式,但是某些场景下,我们想在移动设备上运行,在本地debug,这也行,只需要链接在同一个内网,通过ip ...
- JS判断值是否是正数
1.使用isNaN()函数 isNaN()的缺点就在于 null.空格以及空串会被按照0来处理 NaN: Not a Number /** *判断是否是数字 * **/ function isReal ...
- linux性能分析及调优
第一节:cpu 性能瓶颈 计算机中,cpu是最重要的一个子系统,负责所有计算任务: 基于摩尔定律的发展,cpu是发展最快的一个硬件,所以瓶颈很少出现在cpu上: 我们线上环境的cpu都是多核的,并且基 ...
- ASP.NET Cookie和Session
Cookie和Session C#在服务器,JS在客户端 客户端验证不能代替服务端验证 Http HTTP属于应用层,HTTP 协议一共有五大特点:1.支持客户/服务器模式;2.简单快速;3.灵活;4 ...
- HTML5 拖放（Drag 和 Drop）功能开发——浅谈dataTransfer对象
[前言] 之前我已经为大家介绍过一篇有关HTML5中原生拖拽的相关知识了.今天为大家介绍HTML5拖拽中的其他一些关于dataTransfer对象的知识和应用. dataTransfer对象 之前的一 ...
- EasyUI开发的驾校管理系统
开源SmartLife驾校管理系统,地址:https://github.com/SmartOfLife/DriveMgr 1.界面布局是用的ymnets大神的界面,具体参考:http://www.cn ...
- crontab的两种配置方式
废话不多说,直接上菜了 第一种:在/etc/crontab下设置,指定用户名的 1.vim命令进入/etc/crontab 2.在最后一行加上 59 23 * * * root /root/cat ...
- Java 7之基础 - 强引用、弱引用、软引用、虚引用
1.强引用(StrongReference) 强引用是使用最普遍的引用.如果一个对象具有强引用,那垃圾回收器绝不会回收它.如下: Object o=new Object(); // 强引用 当内 ...