兼容古董级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 ...
随机推荐
- innerText在谷歌、火狐浏览器下的使用
使用innerHTML.replace(/<.+?>/gim,'')代替innerText,简单正则替换一下
- ASP.NET版Memcached监控工具(转载)
在上一篇文章<使用Memcached提高.NET应用程序的性能>中周公讲述如何在.NET中使用Memcached来提高.NET应用程序的性 能.在实际的使用中有可能出现Memcached因 ...
- motto3
在我看来,最努力的人不一定能收获最好的,但不努力的人是必定收获不到任何东西的. 所以,园主,你要会努力才行.否则,你会累死的. 用心去学,用脑去想,认真对待每一件事,聪明一点,不要太愚蠢.
- Entity Framework CodeFirst数据迁移
前言 紧接着前面一篇博文Entity Framework CodeFirst尝试. 我们知道无论是“Database First”还是“Model First”当模型发生改变了都可以通过Visual ...
- 21个常用的PHP代码汇总
PHP 是目前使用最广泛的基于 Web 的编程语言,驱动着数以百万计的网站,其中也包括如 Facebook 等一些大型站点.这里收集了 21个日常开发中实用便捷的 PHP 代码,希望可以对一些 PHP ...
- [Effective JavaScript 笔记] 第8条:尽量少用全局对象
初学者容易使用全局变量的原因 创建全局变量毫不费力,不需要任何形式的声明(只要在非函数里用var 你就可以得到一个全局变量) 写得代码简单,不涉及到大的项目或配合(写hello world是不会有什么 ...
- 重写HashMap
package gov.gfmis.fap.util; import java.util.ArrayList; import java.util.HashMap; import java.util.L ...
- HDU2191多重背包例题
悼念512汶川大地震遇难同胞——珍惜现在,感恩生活 Time Limit: 1000 MS Memory Limit: 32768 KB 64-bit integer IO format: %I64d ...
- Git SSH Key 生成步骤
it是分布式的代码管理工具,远程的代码管理是基于ssh的,所以要使用远程的git则需要ssh的配置. github的ssh配置如下: 一 . 设置git的user name和email: $ git ...
- 一段功能齐全的PHP常用重定向代码html+js+header
/** * 重定向浏览器到指定的 URL * * @param string $url 要重定向的 url * @param int $delay 等待多少秒以后跳转 * @param bool $j ...