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上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- QT5 && VS2013配置
1.下载安装包 qt-opensource-windows-x86-msvc2013_64-5.7.0.exe VS2013_RTM_ULT_ENU.iso 插件:qt-vs-addin-msvc20 ...
- MySQL中binlog参数:binlog_rows_query_log_events
在使用RBR也就是行格式的时候,去解析binlog,需要逆向才能分析出对应的原始SQL是什么,而且,里面对应的是每一条具体行变更的内容.当然,你可以开启general log,但如果我们需要的只是记录 ...
- Amazon Alexa登录授权（Android）
访问Alexa的API,必须要携带AccessToken,也就是必须要登录授权,本文主要记录Amazon Alexa在Android平台上的登录授权过程. 一.在亚马逊开发者平台注册应用 进入亚马逊开 ...
- linux下编译安装nginx
1.首先下载稳定版nginx1.10.2 使用wget命令下载 wget http://nginx.org/download/nginx-1.10.2.tar.gz 2.然后解压 tar -zxvf ...
- linux系统中.bashrc的妙用
一.有何作用 .bashrc - The individual per-interactive-shell startup file. .bashrc - 主要保存个人的个性化设置,如命令别名.路径等 ...
- jQuery修炼心得-DOM节点的删除
要移除页面上节点是开发者常见的操作,jQuery提供了几种不同的方法用来处理这个问题. 1.empty empty 顾名思义,清空方法,但是与删除又有点不一样,因为它只移除了 指定元素中的所有子节点. ...
- mac下安装MySQL完整步骤（图文详情）
原文摘自:http://www.jb51.net/article/103841.htm 最近使用Mac系统,准备搭建一套本地web服务器环境.因为Mac系统自带PHP和apach,但是没有自带mysq ...
- 使用java API操作hdfs--读取hdfs文件并打印
在myclass之中创建类文件,这个myclass目录是自己创建的. 编译的时候会报如下的错误: 很明显就是没有导入包的结果 见这个API网站,则可以找到响应的包,当然还有java的api文档 htt ...
- 单页应用跳转ui-view,$stateProvider,$urlRouterProvider
<!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta charset="UTF- ...
- centos6.5软件安装：RPM,SRPM与yum功能
鸟哥的linxu私房菜读书笔记 前言: Linux上软件的安装可以以原始码的方式来安装软件,也就是利用厂商释出的 Tarball 来进行软件的安装.不过,你应该很容易发现,那就是每次安装软件都需要侦测 ...