兼容问题目录

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的更多相关文章

  1. 新手学习WEB前端流程以及学习中常见的误区

    学习web前端编程技术肯定是以就业拿到高薪工作为主要目的的,可是高薪不会那么轻易拿到,这是一个最简单的道理.没有付出就没有回报,在整个学习web前端编程技术的过程中,你需要付出时间.精力.金钱.废话不 ...

  2. WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  3. 【转】Web前端浏览器兼容初探

    原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...

  4. Web前端浏览器兼容初探

    浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...

  5. [转]Web前端浏览器兼容

    转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...

  6. web前端~~浏览器兼容问题(百度)

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  7. 浅谈Web前端浏览器兼容问题

    对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同 ...

  8. Web前端浏览器兼容问题

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  9. Web前端浏览器兼容性个人经验总结

    前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后 ...

随机推荐

  1. UEFI+GPT下安装Win10+Ubuntu16.04双系统

    安装环境 SSD+HDD双盘,Win10安装在SSD里,HDD分出来60G安装Ubuntu. 自行百度你的主板是否支持UEFI启动方式. Win10 下载Win10安装镜像.烧盘等步骤就不说了,重启后 ...

  2. struts2 之 ServletAPI

    1. 在struts2中有两种方式使用SercletAPI,一种解耦方式,一种耦合方式. 2. 解耦方式就是使用ActionContext 来实现,是完全解耦 servletAPI. ActionCo ...

  3. redis 字符串

    redis 字符串 概述 redis 没有使用 c 语言风格的字符串表示(以 "\0" 作为结尾), 而是使用自定义的 sds 结构 字符串结构 定义位置 (src/sds.h) ...

  4. My SQL数据库的安装与配置

    MySQL是一个关系型数据库管理系统.MySQL所使用的 SQL 语言是用于访问数据库的最常用标准化语言 MySQL 软件采用了双授权政策,分为社区版和商业版,由于其体积小.速度快.总体拥有成本低,尤 ...

  5. 最新的css3动画按钮效果

    效果演示     插件下载

  6. ubuntu下搭建nginx+mysql+php-fpm站点

    概述 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器.  nginx的优势在于能以低内存高 ...

  7. [刷题]算法竞赛入门经典(第2版) 5-8/UVa230 - Borrowers

    //又开学啦,不知不觉成为大二的老人了...时间过得好快啊,感觉好颓废... 题意:建立一个借书/归还系统.有借.还.把还的书插到书架上这三个指令. 代码:(Accepted, 0ms) //UVa2 ...

  8. hosts文件原理

    hosts文件是一个用于储存计算机网络中各节点信息的计算机文件.这个文件负责将主机名映射到相应的IP地址.hosts文件通常用于补充或取代网络中DNS的功能.和DNS不同的是,计算机的用户可以直接对h ...

  9. Java IO和NIO文章目录

    1.java IO详尽解析 2.深入分析 Java I/O 的工作机制 3.InputStream类详解 4.OutputStream类详解 5.JAVA的节点流和处理流 6.FileInputStr ...

  10. arm处理器

    arm处理器 arm处理器相关 1.体系架构定义了指令集(ISA)和基于这一体系结构下处理器的编程模型. arm卖的是架构或者已经设计好的公版ip核 卖给苹果高通的是架构,需要苹果高通通过架构设计自己 ...