WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--03
兼容问题目录
16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
17、IE6下同一层级的浮动元素会盖住绝对定位元素
18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
20、IE67下输入类型的表单控件，上下两边各有1px的间隙
21、IE8以及IE8之前不识别H5标签
22、IE6不支持png透明图片
后续兼容性问题处理链接地址
http://blog.csdn.net/baidu_37107022/article/details/71972223
http://blog.csdn.net/baidu_37107022/article/details/71973570
16、IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
解决办法
给父级也加相对定位
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box{
width: 200px;
height: 200px;
border: 5px solid #f00;
overflow: hidden;
position: relative;
}
#box div{
width: 300px;
height: 300px;
background: green;
position: relative;
}
</style>
</head>
<body>
<!--
IE67下子级有相对定位，并且比父级要大。那父级overflow:hidden;后是包不住它的
解决办法
给父级也加相对定位
-->
<div id="box">
<div></div>
</div>
</body>
</html>
17、IE6下同一层级的浮动元素会盖住绝对定位元素
解决办法
给定位元素外面嵌套一个层
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
border: 5px solid #f00;
position: relative;
}
.box div{
width: 150px;
height: 150px;
background: green;
float: left;
display: inline;
margin-left: 50px;
}
span{
width: 100px;
height: 100px;
background: yellow;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<!--
IE6下同一层级的浮动元素会盖住绝对定位元素
解决办法
给定位元素外面嵌套一个层
-->
<div class="box">
<div></div>
<!--<span>kaivon</span>-->
<p><span>kaivon</span></p>
</div>
</body>
</html>
18、IE6下定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
无法解决
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
border: 10px solid #f00;
position: relative;
}
.box div{
width: 50px;
height: 50px;
background: green;
position: absolute;
right: -10px;
bottom: -10px;
/*left: -10px;
top: -10px;*/
}
</style>
</head>
<body>
<!--
在IE6下，定位父级的宽高是奇数的话，元素的right值或者bottom值会有1px的偏差
-->
<div class="box">
<div></div>
</div>
</body>
</html>
19、IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
解决方法
给元素添加相对定位，或者给父级overflow:hidden;
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 200px;
height: 200px;
border: 1px solid #f00;
}
.box div{
width: 100px;
height: 100px;
background: green;
margin: -10px 0 0 -10px;
}
</style>
</head>
<body>
<!--
IE6下通过margin负值，使元素移出父级的位置，那出去的部分会被截掉
解决方法
给元素添加相对定位，或者给父级overflow:hidden;
-->
<div class="box">
<div></div>
</div>
</body>
</html>
20、IE67下输入类型的表单控件，上下两边各有1px的间隙
解决办法
给控件加浮动
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
border: 1px solid #f00;
overflow: hidden;
zoom: 1;
}
div input{
float: left;
}
</style>
</head>
<body>
<!--
IE67下输入类型的表单控件，上下两边各有1px的间隙
解决办法
给控件加浮动
-->
<div>
<input type="text" />
</div>
</body>
</html>
21、IE8以及IE8之前不识别H5标签
无法解决
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
document.createElement('header');
document.createElement('nav');
</script>
<script src="js/html5shiv.min.js"></script>
<style>
header{
width: 100px;
height: 100px;
background: red;
/*display: block;*/
}
nav{
width: 200px;
height: 200px;
background: green;
}
</style>
</head>
<body>
<!--
IE8以及IE8之前不识别H5标签
-->
<header>头部</header>
<nav>导航</nav>
</body>
</html>
22、IE6不支持png透明图片
使用插件
代码演示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('img,div');
</script>
<style>
body{
background: #ccc;
}
div{
width: 300px;
height: 300px;
background:url(img/1.png);
}
</style>
</head>
<body>
<!--
IE6不支持png-24透明图片
-->
<img src="img/1.png"/>
<div></div>
</body>
</html>
导入插件处理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/DD_belatedPNG_0.0.8a.js"></script>
<script>
DD_belatedPNG.fix('body');
/*
* 这个插件不支持body的背景
*/
</script>
<style>
/*
* 用滤镜的话就必需给body高度
*/
body{
height: 500px;
background: #ccc url(img/1.png) no-repeat;
_background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/1.png", sizingMethod="crop");
}
</style>
</head>
<body>
</body>
</html>
WEB前端：浏览器（IE+Chrome+Firefox）常见兼容问题处理--03的更多相关文章
- 新手学习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上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- 初学Java scirpt（判断、循环语句）
在编写代码时,我们经常需要为不同的判断结果来执行不同的动作以及需要反复执行同一段代码,这时我们就需要使用判断和循环语句来实现. 1.判断语句(if) 判断语句经常用的有(if......else).( ...
- 一个简单的jquery左右列表内容切换应用
选中左边某个选项点击添加,即可将选中项添加到右边文本框中,点击选中全部即可将全部选项移到右边,移除按钮功能相同. html代码: <div id="main"> < ...
- jwt token Example - Python
0 Pre Install Python3 Install PyCrypto Install PyJWT 1 token 由三部分组成 header, payload, sign 并用逗号连接各部分 ...
- CSAcademy Beta Round #4 Swap Pairing
题目链接:https://csacademy.com/contest/arhiva/#task/swap_pairing/ 大意是给2*n个包含n种数字,每种数字出现恰好2次的数列,每一步操作可以交换 ...
- Springmvc的工作流程
1.向服务器发送http请求,请求被前端控制器DispatcherServlet捕获. 2.DispatcherServlet根据servlet.xml中的配置进行URL解析后,得到(URL),然后根 ...
- NodeJs REPL交互式解析器常用命令
REPL 命令 ctrl + c - 退出当前终端. ctrl + c 按下两次 - 退出 Node REPL. ctrl + d - 退出 Node REPL. 向上/向下 键 - 查看输入的历史命 ...
- C++STL中map容器的说明和使用技巧(杂谈)
1.map简介 map是一类关联式容器.它的特点是增加和删除节点对迭代器的影响很小,除了那个操作节点,对其他的节点都没有什么影响.对于迭代器来说,可以修改实值,而不能修改key. 2.map的功能 自 ...
- [ext4]空间管理 - 查找块
在文件系统中,当需要执行写操作时,肯定是需要查找需要写入的块.那么如何查找块哪? 在Ext4系统中,有两个函数是可能执行查找操作的:ext4_getblk().ext4_get_block(). ...
- seajs模块标识命名和解析规则
模块标识采用路径形式,但要注意与路径的区别.require.require.async的第一个参数是模块标识.而seajs.use第一个参数为文件路径. use是全局的,require是局部的.模块标 ...
- JavaScript高级程序设计 第三章 基本概念
ch3 基本概念 标签(空格分隔): JavaScript 语法 标识符 - 第一个字符必须是字母.下划线或美元 - 驼峰大小写格式 严格模式 ECMAScript5引入,定义了一种解析和执行模型.此 ...