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上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- 从零到实现Shiro中Authorization和Authentication的缓存
本文大纲 一.简介 二.缓存的概念 三.自定义实现缓存机制 四.什么是Ehcache 五.Ehcache怎么用 六.Spring对缓存的支持 七.Spring+Ehcache实现 八.Spring+S ...
- windows平台把UliPad添加到右键菜单
对.py文件支持右键用UliPad打开方式支持: 1.打开注册表(win+R,运行框输入regedit) 2.先对*.py文件进行设置.找到注册表目录HKEY_CLASSES_ROOT\Python. ...
- tomcat的环境搭建
tomcat搭建过程还是比较简单的,只需要安装好jdk,然后配置好环境变量,最后把tomcat安装上开启就可以了. 首先下载jdk,然后把下载下来的jdk放到/usr/local下,然后用rpm -i ...
- 2017-4-26 winform 菜单和工具栏
如何让radiobutton进行分组: 用Panel 相当于div 菜单和工具栏: MenuStrip(菜单条) ShortcutKeys-------------------------与菜单 ...
- HTML5 WebGL 实现逼真的云朵效果
使用 HTML5 WebGL 实现超逼真的云朵效果.WebGL 是一项在网页浏览器呈现3D画面的技术,有别于过去需要安装浏览器插件,通过 WebGL 的技术,只需要编写网页代码即可实现3D图像的展示. ...
- hdu5145 NPY and girls
人生中第一道莫队,本来以为是一道水题的.. 首先这题只有区间查询,没有修改操作,使用莫队比较明显,但统计答案有点麻烦.. 根据题意,在n个人里选m个不相同种类的人,设第i种人数量为ai,总方案为c(n ...
- [进程管理]Linux进程状态解析之R、S、D
Linux是一个分时操作系统,能够在一个cpu上运行多个程序,每个被运行的程序实例对应一个或多个进程,这里介绍一下Linux进程状态. Linux是一个多用户,多任务的系统,可以同时运行多个用户的多个 ...
- Andriod相机开发关于startPreview Failed的错误的特别记录（重要）
年前,自己做的Android相机嵌入到一款火爆的游戏中去了,经过几次的修改升级,相机运行上报的错误也越来越少, 但是,前几天刚上线的最新相机,却老是在Android 2.3机器上出现startPrev ...
- 利用有限自动机(finite automata)进行模式匹配
一.有限自动机定义及基本术语: 一个有限自动机 M 是一个5元组(Q, ,A, Σ, δ),其中: Q 是所有状态的有限集合; ∈ Q (属于)是初始状态; A ⊆ Q (子集)是接受状态的集合; ...
- python 基本数据类型set
set 是一个无序且不重复的序列 set 是一个无序且不重复的序列 set 不允许重复的集合.set不允许重复的序列 1.创建 s=set() #创建空集合只能用这种方法 s={11,222,233, ...