关于IE兼容问题
针对IE6/7/8 可以分为两种模式:怪异模式(Quirks mode)和标准模式(Standards mode),在IE6以下版本下显示怪异模式,border和padding都包含在width中
使用IE7编译:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
也可以引进相应的js插件去解决html5和css3的问题,但是只能在小范围内或者单页中使用,代价是消耗性能 一、针对IE hack的技巧进行总结:
有四种方法: 1、条件注释法 2、类内属性前缀法 3、选择器前缀法 4、IE选择器前缀法 1、条件注释法
<!-- [if !IE] -->除了IE都兼容<!-- [endif] -->
<!-- [if IE] ->IE兼容 <!-- [endif] -->
<!-- [if IE6] -->IE6兼容 <!-- [endif] -->
<!-- [if lt IE6] -->IE6以下兼容 <!--[endif]-->
<!--- [if gte IE6] --> IE6及IE6以上兼容 <!--[endif] --> lt:later than
lte: later than and equal
gt: greater than
gte: greater than and equal 2、类内属性前缀法
div{
-webkit-color:#ccc;/*Chrome and Safari*/
-ms-color:#ccc;/* IE */
-moz-color:#ccc;/* firefox*/
-o-color:#ccc;/Opera/
}
3、选择器前缀法
在上面介绍的两种方法基本上能解决80%的兼容性问题,一般不建议优先使用选择器前缀法,因为采用媒体查询的方法(需要CSS3支持)
@media screen and(-webkit-min-device-pixel-ratio:0) {
.class-name{
color:#ccc;/*Chrome and Safari*/
}
}
4、IE选择器前缀法
如果碰到IE8专属的hack使用上面的方法都没办法解决时,就可以使用这种方法了,前提是让IE6-IE8先支持媒体查询
/*IE8*/
@media \0screen{
.class-name {
color:#ccc;
}
} IE6-IE11 全部兼容方法(从高版本写到低版本)
div{
color:#ccc;
color:#ccc\9; /*IE8-IE10*/
color:#ccc\9\0;/*IE9-IE10*/
+color:#ccc;/*IE7*/
_color:#ccc;/*IE6*/
}
@media screen and(-ms-high-contrast:none){
div{
color:#ccc;/*IE10-IE11*/
}
}
@media all and(-ms-hign-contrast:none) {
*::-ms backdrop,div{
color:#ccc;/*IE11*/
}
}
现在用的比较多的就是\9、\0,这是hack IE8、IE9、IE11的专属标识,但是有很多情况下\9、\0对hack IE8、IE9、IE11都不管用。
可能很多人知道\9是用来hack IE9的,\0是用来hack IE8、IE9、IE11的,但是很多情况下都不奏效,
其实IE11仅能识别\0,IE8、IE9能识别\0和\9,那么如何区分IE8和IE9呢? 但是在meta里面定义了meta="IE Edge”的话,IE11仅能识别\0,IE8 IE9能识别\0和\9,关键还是在区分IE8 和IE9,所以代码可以如下:
div{
color:#ccc;
color:#ddd\9;/*IE8 和 IE9*/
color:#eee\0;/*IE11*/
}
/*IE9+*/
@media all and(min-width:0){
div{
color:#f00\9;/*针对IE9,除去Chrome,360等浏览器和IE11*/
}
}
二、IE调试技巧
1、IE6-IE10大部分的div浮动问题都可以通过设置层的width、height和背景色(调试)解决
2、容器内有浮动层元素的,在容器末尾添加清除浮动属性。
3、使用IE-TEST和谷歌调试工具,IE8以下版本使用fire-bug的JS版本,IE8及以上的参考内置的调试工具(和实际效果显示不一样)
4、兼容性版本的和实际效果是有差距的
5、调试版本都从高到低版本进行调试,防止属性版本污染
6、调试过程中,依次从外围向里删除无关的HTML结构和CSS/JS,直到出现问题的赌坊
7、尽量少些hack,用其他方式可以避免则尽量避免 三、IE个版本的bug
1、IE6 margin双倍边距
在IE6中,浮动的div左右边上的margin会有双倍的值,解决方法:在这个div里添加display:inline;
2、IE6 图片下会有空白缝隙
解决方法:改变html的布局,设置img为display:block或者vertical-align:top|bottom|middle都可以解决
3、IE6无法定义1px左右高度的容器
主要是IE6下的默认行高造成的
解决办法:overflow:hidden|zoom:0.08|line-height:1px
关于IE兼容问题的更多相关文章
- 一次修改闭源 Entity Provider 程序集以兼容新 EntityFramework 的过程
读完本文你会知道,如何在没有源码的情况下,直接修改一个 DLL 以去除 DLL 上的强命名限制,并在该程序集上直接添加你的“友元程序集(一种特殊的 Attribute,将它应用在程序集上,使得程序集内 ...
- JS图片上传预览插件制作(兼容到IE6)
其实,图片预览功能非常地常见.很意外,之前遇到上传图片的时候都不需要预览,也一直没有去实现过.现在手上的项目又需要有图片预览功能,所以就动手做了一个小插件.在此分享一下思路. 一.实现图片预览的一些方 ...
- APP多版本共存,服务端如何兼容?
做过APP产品的技术人员都知道,APP应用属于一种C/S架构的,所以在做多版本兼容,升级等处理则比较麻烦,不像web应用那么容易.下面将带大家分析几种常见的情况和应对方式: 小改动或者新加功能的 这种 ...
- ie6 ie7 ie8 ie9兼容问题终极解决方案
放下包袱,解决低版本兼容问题 这是一个老生常谈的问题,自然解决这个问题的方案也比较多,下面整理了一些解决方法: 1.强制使用高版本渲染模式. 强制使用Edge模式来解析网页代码 <meta ...
- H5嵌入原生开发小结----兼容安卓与ios的填坑之路
一开始听说开发H5,以为就是做适配现代浏览器的移动网页,心想不用管IE了,欧也.到今天,发现当初too young too simple,兼容IE和兼容安卓与IOS,后者让你更抓狂.接下来数一下踩过的 ...
- DOM getElementsByClassName IE兼容方案
平时写HTML时多用class来命名,为很少用id来命名,主要原因就是class使用起来比较灵活. 但是万恶的JS在操作DOM的时候对ie6+只提供了getElementById和getElement ...
- 记一次使用 android 自带 WebView 做富文本编辑器之API、机型的兼容及各种奇葩bug的解决
转载请声明出处(http://www.cnblogs.com/linguanh/) 目录 1,测试设备介绍 2,开源项目richeditor及CrossWalk的选择 3,遇到的bug及其解决方法 4 ...
- CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化
一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...
- 【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)
前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜鸟,建议您好好读一读,真的理解下来会有不一样的收获 在下才疏学浅, ...
- 响应式图片菜单式轮播,兼容手机,平板,PC
昨天在给自己用bootstrap写一个响应式主业模版时想用一个图片轮播js,看到了bootstrap里面的unslider.js,只有1.7k,很小,很兴奋,但使用到最后发现不兼容手机,当分辨率变化的 ...
随机推荐
- 【转】Hibernate和IBatis对比
原文地址:http://blog.csdn.net/ya2dan/article/details/7396598 项目也做过几个, 使用IBatis就做一个项目, 基本上都是使用Hibernate, ...
- 关于echarts的一些基本使用demo
最近发现一个很好用的一个前端控件echarts,效果非常不错,兼容ie8+以上等主流浏览器.可以使用它制作报表,地图示意图等,可用其实现一系列强大的功能. 其基于html5 Canvas,是一个纯Ja ...
- phpcms中用到的几个重要的代码
{pc:content action="lists" catid="12" moreinfo="1" order="id ASC& ...
- 第十篇 一个利用反射实现的Excel导出
前些天写了个导出Excel的公共类,因为项目中也需要上传Excel,没有利用Office组件,(PS:Office在上传文件时候,Excel进程无法关闭,会导致上传和打开失败)有的说利用Kill把进程 ...
- 解决行内元素间隙bug问题
行内元素之间会产生间隙bug问题的场景: 1.当行内元素之间有“回车”.“tab”.“空格”时就会出现间隙. 如下代码: <div> <a>1</a> &l ...
- Java XML DOM解析(xPath)
(一) XML概念 在电子计算机中,标记指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种的信息比如文章等.它可以用来标记数据.定义数据类型,是一种允许用户对自己的标记语言进行定义的 ...
- RMI原理及简单示例
分布式对象 在学习 RMI 之前,先来分布式对象(Distributed Object):分布式对象是指一个对象可以被远程系统所调用.对于 Java 而言,即对象不仅可以被同一虚拟机中的其他客户程序( ...
- Maven的声明周期(Lifecycle )和命令(Phase)
生命周期(Lifecycle ) Maven有三套相互独立的生命周期(Lifecycle ): Clean Lifecycle:做一些清理工作: Default Lifecycle:构建的核心部分.编 ...
- selenium 运行之后错误提示Unable to connect to host 127.0.0.1 on port 7055 after 45000 ms. Firefox console output
错误提示: org.openqa.selenium.firefox.NotConnectedException: Unable to connect to host 127.0.0.1 on port ...
- server error in '/' applecation----Compiler Error Message: CS0016: Could not write to output file 'c:\Windows\Microsoft.NET\Framework64\v4.0.30319\Temporary ASP.NET Files\root\xx' -- 'Access is denied
今天在阿里云虚拟机上部署新站点后出现下面的错误:server error in '/' applecation Compiler Error Message: CS0016: Could not wr ...