兼容古董级IE小结
IE6已经死亡,当然7,8,9,10也挂掉了。微软对IE11更下了狠手,对其停止了更新。以为前端就可以安安心心地写代码了。可是就是有些顽固分子,竟然用的还是IE6,尊崇客户至上的原则,就恶心着给他兼容老古董。
IE条件注释,微软官方推荐的hack方式
<!--[if IE]>这段文字只在IE浏览器上显示<![endif]-->
<!--[if IE 6]>这段文字只在IE6浏览器上显示<![endif]-->
<!--[if gt IE 6]>这段文字只在IE6以上版本IE浏览器上显示<![endif]-->
<!--[if ! IE 7]>这段文字在非IE7浏览器上显示<![endif]-->
<!--[if !IE]><!-->这段文字只在非IE浏览器上显示!--<![endif]-->
google的ie7 – js,它是一个JavaScript库(解决IE与W3C标准的冲突的JS库),使微软的Internet Explorer的行为像一个Web标准兼容的浏览器,支持更多的W3C标准,支持CSS2、CSS3选择器。它修复了许多的HTML和CSS问题,并使 得透明PNG在IE5、IE6下正确显示。
使IE5,IE6兼容到IE7模式(推荐)
<!–[if lt IE 7]><script src=” http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE7.js ”></script><![endif]–>
以下两个是不推荐的,我在浏览器出现了问题
1.使IE5,IE6,IE7兼容到IE8模式
<!–[if lt IE 8]><script src=” http://ie7-js.googlecode.com/svn/version/2.0(beta)/IE8.js”></script><![endif]–>
2.使IE5,IE6,IE7,IE8兼容到IE9模式
<!–[if lt IE 9]><script src=” http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js ”></script><![endif]–>
文档模式渲染
1.强制使用IE5模式来解析
<meta http-equiv=“X-UA-Compatible” content=“IE=5″>
2.强制使用IE6模式来解析
<meta http-equiv=“X-UA-Compatible” content=“IE=6″>
3.强制使用IE7模式来解析的两种方式
<meta http-equiv=“X-UA-Compatible” content=“IE=EmulateIE7″>
<meta http-equiv=“X-UA-Compatible” content=“IE=7″>
4.强制使用IE8模式来解析
<meta http-equiv=“X-UA-Compatible” content=“IE=8″>
5. Google Chrome Frame也可以让IE用上Chrome的引擎:
<meta http-equiv=“X-UA-Compatible” content=“chrome=1″/>
6.如果一个特定版本的IE支持所要求的兼容性模式多于一种,如下代码就是IE5和IE8两种模式:
<meta http-equiv=“X-UA-Compatible” content=“IE=5; IE=8″/>
7.使用GCF来渲染页面
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/>
如果安装了GCF(Google Chrome Frame 谷歌内嵌浏览器框架,则使用GCF来渲染页面,如果没安装GCF,则使用最高版本的IE内核进行渲染。这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。
兼容技巧
让IE6支持max-width,min-width
IE没有min-这个定义,实际上它把正常的width和height当作有min的情况来处理。如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。
比如要设置背景图片,它宽度是很重要的:
#box{ width: 80px; height: 35px;}
html>body #box{ width: auto; height:
auto; min-width: 80px; min-height: 35px;}
在早期IE中,可以在css中写下类似js代码来兼容IE6
.sector{max-width:500px; _width:expression((documentElement.clientWidth>500)?"500px":"auto");
min-width:300px; _width:expression((documentElement.clientWidth<300)?"300px":"auto");}
万能 float 闭合
相信这个hask大家都不陌生,给需要闭合的div加上 class="clearfix" 即可。
/* Clear Fix */
.clearfix:after{
content:".";
display:block;
height:;
clear:both;
visibility:hidden;
} .clearfix{
display:inline-block;
} /* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
对IE6PNG显示问题
只需将透明png图片命名为 *-trans.png ,但此方法对背景平铺(background-repeat)和背景(background-position)无法起到任何作用,默认会占满整个容器。
marging与padding引起高度不适应
FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决,随着IE7对!important的支持,!important 方法现在只针对IE6的HACK。)。高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用margin 或paddign 时。例:
<div id="box"><p>p对象中的内容</p> </div>
CSS:#box {background-color:#eee; } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
居中问题.
1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.)
2).水平居中. margin: 0 auto;(当然不是万能)
浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,不可控制(内嵌元素);
DIV浮动IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{ float:left; width:800px;}#left{ float:left; width:50%;}#right{
width:50%;}*html #left{ margin-right:-3px; //这句是关键}
HTML代码<div id="box"> <div id="left"></div>
<div id="right"></div></div>
标准模式和怪异模式盒模型:
标准模式下:Element width = width + padding + border
怪异模式下:Element width = width
IE6下某些情况line-height无效
当在一个容器里文字和img、input、textarea、select、object等元素相连的时候,对这个容器设置的line-height数值会失效;
同时以上元素的行高可能×2。
解决办法:
对和文字相连接的img、input、textarea、select、object等元素加以属性:
{margin: (所属line-height-自身img,input,select,object高度)/2px 0;vertical-align:middle;}
其它
1, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签)
2, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表)
3, 作为外部 wrapper 的div不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应.
4,按钮在IE7及更早浏览器下随着value增多两边留白也随着增加的问题。解决办法:input,button{overflow:visible;}
5,button重置css样式兼容ie6,ie7,需要设置overflow:visible
6,IE6下无法定义很小的高度:如1px.。因为u默认会有行高,添加line-height:即可
兼容古董级IE小结的更多相关文章
- html中的行内元素和块级元素小结
一.首先我们总结下行内元素和块级元素有哪些: 行内元素: <a>标签可定义锚<abbr>表示一个缩写形式<acronym>定义只取首字母缩写<b>字体加 ...
- Linux 内核引导选项简介
Linux 内核引导选项简介 作者:金步国 连接地址:http://www.jinbuguo.com/kernel/boot_parameters.html 参考参数:https://www.cnbl ...
- Linux 内核引导参数简介
概述 内核引导参数大体上可以分为两类:一类与设备无关.另一类与设备有关.与设备有关的引导参数多如牛毛,需要你自己阅读内核中的相应驱动程序源码以获取其能够接受的引导参数.比如,如果你想知道可以向 AHA ...
- 兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1); 但是要兼容到 ...
- 兼容ie8 rgba()用法 滤镜filter的用法
原文 http://blog.csdn.net/westernranger/article/details/40836861 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不 ...
- IE8下兼容rgba颜色的半透明背景
在工作中做一个图片半透明遮罩时发现在IE8下不兼容 一查再知道IE8不支持rgba颜色,再搜搜兼容性方法,没想到这么快就解决了. 先说说rgba的含义: r代表red,g代表green,b代表blue ...
- ie6+7+8等对background-color:rgba(),background-img渐变的兼容
一,ie8兼容rgba()的解决办法 今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255, ...
- IE8下实现兼容rgba
昨天遇到一个问题,要实现一个背景透明的效果,用CSS3用rgba()就能实现,即 background: rgba(0,0,0,.5); 但是要兼容到IE8,就发现没有透明效果,因为IE8不支持rgb ...
- backgroud背景色样式兼容ie8 rgba()用法
今天遇到了一个问题,要在一个页面中设置一个半透明的白色div.这个貌似不是难题,只需要给这个div设置如下的属性即可: background: rgba(255,255,255,.1);但是要兼容到i ...
随机推荐
- cmd+lcx+nc+sc提权工具总结
cmd:执行命令的载体cmdshell lcx:端口映射工具 1.在自己的host上的cmd下运行:lcx.exe -listen 51 3389 //意思是监听51端口并转发到3389端口 2.在服 ...
- iOS 用instancetype代替id作返回类型有什么好处?
2014-07-07更新:苹果在iOS 8中全面使用instancetype代替id Steven Fisher:只要一个类返回自身的实例,用instancetype就有好处. @interface ...
- 抓包工具 wireshark
http://fangxin.blog.51cto.com/1125131/735178
- ThinkPHP访问不存在的模块跳到404页面
在ACTION中新建一个文件EmptyAction.class.php,文件中的代码如下: <?php class EmptyAction extends Action{ functio ...
- cf.295.B Two Buttons (bfs)
Two Buttons time limit per test 2 seconds memory limit per test 256 megabytes input standard input ...
- ABK (枚举)
ABK Accepted : 24 Submit : 176 Time Limit : 1000 MS Memory Limit : 65536 KB 题目描述 ABK是一个比A+B还要简单 ...
- [Effective JavaScript笔记]第1条:了解使用的js版本
1997年 正式成为国际标准,官方名称为ECMAScript. 1999年 定稿第3版ECMAScript标准(简称ES3),最广泛的js版本. 2009年 发布第5版即ES5,引入了一些新特性,标准 ...
- [Effective JavaScript 笔记]第15条:当心局部块函数声明笨拙的作用域
嵌套函数声明.没有标准的方法在局部块里声明函数,但可以在另一个函数的顶部嵌套函数声明. function f(){return "global"} function test(x) ...
- c++字符串详解(转)
之所以抛弃char*的字符串而选用C++标准程序库中的string类,是因为他和前者比较起来,不必担心内存是否足够.字符串长度等等,而且作为一个类出现,他集成的操作函数足以完成我们大多数情况下(甚至是 ...
- WPF 元素绑定
1.什么是数据绑定数据绑定是一种关系,WPF程序从源对象中提取一些信息,并根据这些信息设置目标对象的属性,目标属性作为依赖项属性.源对象可以是任何内容,可以是另一个wpf内容,甚至是自行创建的纯数据对 ...