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上没问题,其它浏览器坑爹(多出现与前端后 ...
随机推荐
- kmp（看毛片）算法
别人的两篇博客. 传送门1 传送门2 其中T为主串,P为模式串. 其实就是在T中找P. 其中next数组存的是"部分匹配值". "部分匹配值"就是"前 ...
- 拍照、本地图片工具类（兼容至Android7.0）
拍照.本地图片工具类:解决了4.4以上剪裁会提示"找不到文件"和6.0动态授予权限,及7.0报FileUriExposedException异常问题. package com.hb ...
- script defer和async一探
今天几经折腾,终于回家了,最近公司上的事忙了好一阵子,终于可以闲下来,重新在整理一下,又重新了解了一下defer和async在页面加载过程差异. 定义和用法 async 属性规定一旦脚本可用,则会异步 ...
- windows平台把UliPad添加到右键菜单
对.py文件支持右键用UliPad打开方式支持: 1.打开注册表(win+R,运行框输入regedit) 2.先对*.py文件进行设置.找到注册表目录HKEY_CLASSES_ROOT\Python. ...
- 关于Java中Arrays.sort()方法TLE
最近一直在练用Java写题,今天无意发现一道很简单的二分题(链接),我一开始是直接开int[]数组调用Arrays.sort()去排序,没想到TLE了,原来是因为jdk中对于int[]的排序是使用快速 ...
- c标签和foreach循环不能加载
需要同时导入2个包: jstl.jar和standard.jar(大多数时候只会注意到jstl包,而忽视了standard包) 代码: c标签的写法 <%@ taglib prefix=&quo ...
- python代码零散知识点
1.用python读入csv文件 green_taxi1=pd.DataFrame(pd.read_csv('../../../../MatlabCode/data/green/green_tripd ...
- JS中Object常用的一些属性和方法
1⃣️属性 刚接触prototype.constructor.proto这三个玩意儿的时候,是不是有点儿傻傻分不清楚的感觉?下面来简单的说下... 举
- VueJS 组件参数名命名方式和前台显示
camelCase(驼峰式) 和. kebab-case(短横线式) HTML 特性是不区分大小写的.所以,当使用的不是字符串模版,camelCased (驼峰式) 命名的 prop 需要转换为相对应 ...
- Ruby读excel写入mysql
安装mysql2 打开cmd: gem install mysql2 代码 require 'win32ole' require 'mysql2' class String def addslashe ...