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上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- JavaWeb开发之HttpServletResponse
1. HttpServletResponse简介 Web服务器回送给Web客户端的HTTP响应消息分为三个部分:状态行,响应消息头,响应体. Servlet API中定义了ServletRespons ...
- php 启动过程 - sapi MINIT 过程
php 启动过程 - sapi MINIT 过程 sapi 概念 sapi 是 php 的应用编程接口, server 端接收请求通过 sapi 接口层交给 php 处理 不同的 server 端底层 ...
- Neural Networks and Deep Learning(神经网络与深度学习) - 学习笔记
catalogue . 引言 . 感知器及激活函数 . 代价函数(loss function) . 用梯度下降法来学习-Learning with gradient descent . 用反向传播调整 ...
- vue2-loading-bar 一款基于Vue2的进度条插件
自学了N久vue,奈何没有练手项目,终于决心拿个东西来试试手.基于对音乐的热爱,选择的第一个demo是音乐播放器.一般播放器都有进度条,于是无意间找到这个插件,就是vue2-loading-bar,这 ...
- bzoj2884 albus就是要第一个出场
Description 已知一个长度为n的正整数序列A(下标从1开始), 令 S = { x | 1 <= x <= n }, S 的幂集2^S定义为S 所有子集构成的集合.定义映射 f ...
- 使用虚拟机CentOS7部署CEPH集群
第1章 CEPH部署 1.1 简单介绍 Ceph的部署模式下主要包含以下几个类型的节点 Ø CephOSDs: A Ceph OSD 进程主要用来存储数据,处理数据的replication,恢复 ...
- HTML5和CSS3实现3D转换效果 CSS3的3D效果
上次,我们一起研究了css3的2d模块,这次我们一起来看一下css3的3d模块. 首先,我们来了解一下3d的坐标系,x轴在屏幕上为水平方向,y轴为垂直方向,而z轴为垂直于屏幕的方向. 不理解的话可以参 ...
- xmlplus 组件设计系列之九 - 树（Tree）
树形组件是一种具有层级结构的组件,广泛应用于各种场景.本章会实现一个简单的树形组件,尽管功能有限,但你可以通过扩展它来实现自己所需要的树形组件. 数据源 树形组件的数据源可以是 JSON 格式的数据对 ...
- 忘记了root密码，如何进入系统?
Issue 问题 忘记了root密码不能进入系统 如何进入系统? 环境 红帽企业版Linux所有版本 解决方法 可以进入单用户模式或者援救模式来改变root密码,如何进入单用户模式取决引导加载程序. ...
- oracle 12c 新特性之（相同字段上的多重索引、ddl 日志、限制PGA的大小、分页查询）
1. 相同字段上的多重索引 在Oracle 12c R1之前,一个字段是无法以任何形式拥有多个索引的.或许有人会想知道为什么通常一个字段需要有多重索引,事实上需要多重索引的字段或字段集合是很多的. ...