IE兼容性问题
1.H5标签兼容。
解决：
js:document.createElement("footer");
css:display: block;
或者直接使用 html5shiv.js
元素浮动之后,能设置宽度的话就给元素加宽度.如果需要宽度是内容撑开,就给它里边的块元素加上浮动
;
<div class="box clear">
<body>
<div class="box clear">
<div class="left">
<h2>左边</h2>
</div>
<div class="right">
<h2>右边</h2>
</div>
</div>
</body>
<style>
.clear:after{
content: '';
display: block;
clear: both;
}
.clear{
clear: both;
}
.box{
width: 400px;
border: 1px solid black;
/*float: left;*/
//overflow:hidden;
}
.left{
float: left;
background-color: red;
}
.right{
float: right;
background-color: blue;
}
h2{
float: left;
margin: 0;
height: 30px;
}
</style>
2.第一块元素浮动,第二块元素加margin值等于第一块元素,在IE6下会有间隙问题;
<!--
解决方案：
1、不建议这么写
2、用浮动解决
-->
3.IE6下子元素超出父级宽高，会把父级的宽高撑开
解决方案：
不要让子元素的宽高超过父级
4.p 包含块元素嵌套规则
5.margin兼容性问题
1、margin-top传递
触发BFC、haslayout
2、上下margin叠压
尽量使用同一方向的margin，比如都设置top或者bottom，
display:inline-block
<style>
div{
width: 100px;
height: 100px;
background-color: red;
display: inline-block;
*display:inline;
*zoom:1;
}
</style>
<!--
解决方案：
*display:inline;
*zoom:1;
-->
6.IE6 最小高度问题
<!--
IE6下最小高度19px
解决方案：
overflow:hidden;
-->
7.IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin比设置的大。
浮动ie产生的双倍距离
#box{ float:left; width:10px; margin:0 0 0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 ——_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“\9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff\9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
8.当元素浮动后再设置margin那么就会产生双倍边距
解决方案：
针对ie6、7添加display:inline
9.li里元素都浮动 li 在IE6 7 下方会产生4px间隙问题
.list li{
height: 30px;
border: 1px solid red;
line-height: 30px;
*vertical-align: top;
}
.list li a{
float: left;
}
.list li span{
float: right;
}
解决方案：
针对ie6，7添加*vertical-align: top;
10.浮动元素之间注释，导致多复制一个文字问题
<!--
两个浮动元素中间有注释或者内联元素并且和父级宽度相差不超过3px
解决方案：
1、两个浮动元素中间避免出现内联元素或者注释
2、与父级宽度相差3px或以上
--> <body>
<div class="wrap">
<div class="left"></div>
<span></span><!-- IE下文字溢出BUG -->
<div class="right">↓这是多出来的一只猪</div>
</div> <style>
.wrap{
width: 400px;
}
.left{
float: left;
}
.right{
width: 398px;
float: right;
}
</style>
</body>
12.IE6 7 父级元素的overflow:hidden 是包不住子级的relative
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
<style>
.box{
width: 200px;
height: 200px;
background-color: red;
border: 10px solid black;
overflow: hidden;
/**position: relative;*/
}
.content{
width: 400px;
height: 400px;
background-color: blue;
position: relative;
}
</style>
解决方案：
针对ie6、7给父级元素添加相对定位
13.IE6下绝对定位元素父级宽高是奇数,绝对定位元素的right和bottom值会有1px的偏差
解决方案：
避免父级宽高出现奇数
14.IE6下绝对定位元素和浮动元素并列绝对定位元素消失
解决方案：
浮动元素和绝对定位元素是同级的话定位元素就会消失。所以咱们
只要让他们俩不处于同级就可以避免这个bug。
15.IE6 下input的空隙
<div class="box">
<input type="text" />
</div>
<style>
.box{
width: 200px;
border: 1px solid #000000;
background-color: red;
}
.box input{
border: 0;
margin: 0;
width: 200px;
height: 30px;
background-color: #fff;
*float: left;
}
</style>
可以看出input与box间有1px间隙
解决方案：
给input元素添加float
16.IE6 下 输入类型表单控件背景问题
CSS hack
针对不同的浏览器写不同的CSS 样式的过程，就叫CSS hack!
\9 所有的IE10及之前
+ * IE7及ie7以下的ie浏览器认识
_IE6及ie6的ie浏览器认识
17.IE6不支持png24 图片。
解决方案：
JS插件(问题:不能处理body之上png24)
DD_belatedPNG.fix('xxx');
原生滤镜
_background:none;_filter : progid:DXImageTransform.Microsoft.AlphaImageLoader
(src="XX.png", sizingMethod="crop");
IE兼容性问题的更多相关文章
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- SQL Server2008R2 在windows8上安装，出现“兼容性”和 “执行未经授权的操作”的错误！
本人是windows8.1的操作系统,亲测安装成功 解决方法如下: 1.卸载干净sql Server2008r2,包括注册表内容,删除c盘下的安装路径! 2.关闭防火墙(这步很重要) 3.断开网络连接 ...
- [转载]强制不使用“兼容性视图”的HTML代码
在IE8浏览器以后版本,都有一个"兼容性视图",让不少新技术无法使用.那么如何禁止浏览器自动选择"兼容性视图",强制IE以最高级别的可用模式显示内容呢?下面就介 ...
- 企业IT管理员IE11升级指南【16】—— 使用Compat Inspector快速定位IE兼容性问题
企业IT管理员IE11升级指南 系列: [1]—— Internet Explorer 11增强保护模式 (EPM) 介绍 [2]—— Internet Explorer 11 对Adobe Flas ...
- 浅谈WebService的版本兼容性设计
在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...
- position:sticky的兼容性尝试
开篇 笔者刚刚结束淘宝的工作,现在加入了一家有青春活力的垂直电商公司,正对着阿里巴巴的西溪园区,最近一直在熟悉新的工作环境和规范,因此博客有好些时间没有更新了,在此抱歉! 在忙碌完公司的发布系统之后, ...
- 常用原生JS方法总结（兼容性写法）
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- Atitit Atitit.软件兼容性原理----------API兼容 Qa7
Atitit Atitit.软件兼容性原理----------API兼容 Qa7 1. 兼容性的重要性与反面教材1 2. 提升兼容性的原则2 2.1. What 与how 分离2 2.2. 老人老办法 ...
- Atitit.兼具兼容性和扩展性的配置方案attilax总结
Atitit.兼具兼容性和扩展性的配置方案attilax总结 文件配置法1 Jdbc多数据源文件配置发1 Bat文件配置法1 改进的文件配置法(采用类似i18n技术) 推荐1 使用自动化pc_id的方 ...
- Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结
Atitit.软件架构高扩展性and兼容性原理与概论实践attilax总结 1. 什么是可扩展的应用程序?1 2. 松耦合(ioc)2 3. 接口的思考 2 4. 单一用途&模块化,小粒度化2 ...
随机推荐
- DotNet IOC Framework - Microsoft Unity介绍
一. 新建一个ASP.NET MVC4项目 二. 安装Microsoft Unity 1) 管理Nuget程序包 2)安装Unity3程序包 在你的App_Start文件夹里会多出来两个文件 三. 一 ...
- ubuntu安装mysql后不能远程访问的方法
ubuntu安装mysql后不能远程访问的方法1.mysql>GRANT ALL PRIVILEGES ON *.* TO 'myuser'@'%' IDENTIFIED BY 'mypassw ...
- 模板 树链剖分BFS版本
//点和线段树都从1开始 //边使用vector vector<int> G[maxn]; ],num[maxn],iii[maxn],b[maxn],a[maxn],top[maxn], ...
- Matplotlib 工具包 使用教程索引
官方文档链接中: http://matplotlib.org/gallery.html 这里给了非常多演示样例图片.能够查看对应源码,是一个非常好学习途径. matplotlib 函数API :函数A ...
- Android开发实例之多点触控程序
智能终端设备的多点触控操作为我们带来了种种炫酷体验,这也使得很多Android开发者都对多点触控程序的开发感兴趣.实际上多点触控程序的实现并不是那么遥不可及,而是比较容易.本文就主要通过一个实例具体讲 ...
- [Javascript] Introduce to Webpack
To use webpack, first you need to run: npm install webpack 2. Create a webpack.config.js file: modul ...
- Web应用Word生成
前段时间接到一个Web应用自己主动生成Word的需求,现整理了下一些关键步骤拿来分享一下. 思路:(注:这里仅仅针对WORD2003版本号.其他版本号大同小异.) 由于WORD文件内部的数据及格式等是 ...
- ABAP 日期函数
一 财务期间处理 T_CODE: OB29 **取 公司年度变式, 和 货币 SELECT SINGLE waers periv FROM t001 INTO (v_waers,v_p ...
- [Effective C++ --027]尽量少做转型动作
引言 ...
- 第二章 使用JavaScript
只要一提到把JavaScript放在网页中,就不得不涉及Web的核心语言-HTML.在当初开发JavaScript的时候,Netscape要解决的一个重要问题就是如何让JavaScript既能在HTM ...