(转载)最近总是遇到各种 IEbug,mark一下,学习到了,转载出处:http://www.cnblogs.com/ruomeng/p/5332814.html
本文分享下我在项目中积累的IE8+兼容性问题的解决方法。根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK了(这里的IE8+主要是指IE8,据个人目测,IE9+的渲染效果已经非常好了)。
前期准备
测试IE兼容性必须要在Windows中测,而且是Win7+,因为WinXP最高只支持IE8,IE9就呵呵啦!大部分做Web的童鞋都不是使用Windows做为开发环境,要么是Linux发行版,要么是Mac OS。怎么办?一般有2种方法:
- 开Windows虚拟机
- 将开发环境暂时切换到Windows
如果你的机器足够快,我推荐前一种方式。但如果机器不行,开虚拟机就会很卡。如果你是Pythonista,我之前写的一篇日志《在Windows中搭建Python Web开发环境》可能会对你有点用处。
我觉得可以把精力集中在这几个浏览器上:IETester(IE8-IE9)、360浏览器、搜狗浏览器、Chrome。IETester测完了建议再用真实的IE8、IE9过一遍,以防万一。
DOCTYPE
首先需要确保你的HTML页面开始部分要有DOCTYPE声明。DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响:
- 对标记、attributes 、properties的约束规则
- 对浏览器的渲染模式产生影响,不同的渲染模式会影响到浏览器对于CSS 代码甚至 JavaScript 脚本的解析
DOCTYPE是非常关键的,目前的最佳实践就是在HTML文档的首行键入:
<!DOCTYPE html>
对于DOCTYPE的具体阐述就不展开了,可以参考:《正确使用DOCTYPE》、《CS002: DOCTYPE 与浏览器模式分析》。
使用meta标签调节浏览器的渲染方式
IE8中有一个“兼容性视图”的概念,当初IE8发布时,相对于IE6/7已经做出了非常大的改进,但是很多老站点仅针对IE6/7进行了优化,使用IE8渲染反而会一团糟。为了照顾这些苦逼的前端工程师,IE8加入了“兼容性视图”功能,这样的话就可以在IE8中使用IE6或IE7的内核渲染页面。这个当然不是我们想要的,所以需要使用meta标签来强制IE8使用最新的内核渲染页面,代码如下:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
IE=edge
表示强制使用IE最新内核,chrome=1
表示如果安装了针对IE6/7/8等版本的浏览器插件Google Chrome Frame(可以让用户的浏览器外观依然是IE的菜单和界面,但用户在浏览网页时,实际上使用的是Chrome浏览器内核),那么就用Chrome内核来渲染。关于此meta标签的具体说明,可参见StackOverflow上的精彩回答。
国内存在很多双核浏览器比如360浏览器、搜狗浏览器,它们是怎么决定某页面到底使用哪种内核渲染?下面引用一段360浏览器v6新特性的官方说明:
由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例,我们优先通过Webkit内核渲染主流的网站,只有小量的网站通过IE内核渲染,以保证页面兼容。在过去很长一段时间里,我们主要的控制手段是一个几百k大小网址库,一个通过长期人工运营收集的网址库。
尽管我们努力通过用户反馈、代码标签智能判断技术提高浏览器的自动切核准确率。但是在很多情况下,我们仍然无法达到百份百正确。因此,我们新增加了一个控制手段:内核控制Meta标签。只要你在自己的网站里增加一个Meta标签,告诉360浏览器这个网址应该用哪个内核渲染,那么360浏览器就会在读取到这个标签后,立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。
解决方法360已经告诉我们了,通过meta标签的方式建议其使用Webkit,代码如下:
<meta name="renderer" content="webkit">
我没有做细致的调查,不知道其他的双核浏览器是否支持此特性。
Media Query
IE8似乎无法识别Media Query,所以需要hack一下啦!推荐采用Respond.js解决此问题,具体方法参见它的文档即可。
实现CSS3的某些特性
IE8不支持CSS3的很多新特性,不过我们可以使用一些比较成熟的hack方法,我采用的是CSS3 PIE,它支持的特性有这些:border-radius、box-shadow、border-image、multiple background images、linear-gradient等。
特别注意:请一定阅读CSS PIE给出的Know Issues。
识别HTML5元素
如果你在前端代码中使用了HTML5的新标签(nav/footer等),那么在IE中这些标签可能无法正常显示。我使用html5shiv,具体使用方法见文档。
关于max-width
还有一个在IE8中经常遇到的问题就是max-width,网页中图片的尺寸可能比较宽,我会给它设置max-width: 100%
来限制其宽度最大为父容器的宽度,但是有时候却不奏效,慢慢摸索才得知IE解析max-width所遵循的规则:严格要求直接父元素的宽度是固定的。经实验发现Chrome所遵守的规则比IE松一些,所以这个问题应该不归属为IE兼容性问题,不过我还是提一下吧。分享两个我遇到的场景:
(1)td中的max-width
如果针对td中的img元素设置max-width: 100%
,在IE和Firefox你会发现不奏效,而在Chrome中却是可以的。经查询发现需要给table设置table-layout: fixed
,对此属性的具体解释见W3School。
(2)嵌套标签中的max-width
如下的HTML结构:
<div class="work-item">
<a href="#" class="work-link">
<img src="sample.jpg" class="work-image img-responsive">
</a>
</div>
最外层元素.work-item
设置了固定宽度,但是对img设置max-width为100%却无效,后来才发现需要再对a标签设置width: 100%
,这样才能使最内层的img标签充满整个div。
嵌套inline-block下padding元素重叠
HTML代码:
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
<li><a>3</a></li>
</ul>
CSS代码:
ul li{
display: inline-block;
}
ul li a{
display: inline-block;
padding: 10px 15px;
}
按理来说a标签之间的距离应该是30px,但在IE8中出现了重叠,只有15px。这里和这里也提到了同样的问题。我的解决方法是使用float: left
替代display: inline-block
实现水平布局。
placeholder
IE8下不支持HTML5属性placeholder,不过为解决此问题的js插件挺多的,比如:jquery-placeholder。
last-child
first-child是CSS2的内容,但是last-child就不是了,所以IE8不买账。推荐的做法不是使用last-child,而是给最后一个元素设置一个.last
的class,然后对此进行样式设置,这样就全部兼容了。
background-size: cover
如果你想使用background-size: cover
设置全屏背景,很遗憾IE8办不到...但可以使用IE独有的AlphaImageLoader滤镜来实现,添加一条如下的CSS样式:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)
将sizingMethod设置为scale就OK了。
还没完,如果你在此背景之上放置了链接,那这个链接是无法点击的。一般情况下的解决办法是为链接或按钮添加position:relative
使其相对浮动。
filter blur
CSS3中提供支持滤镜效果的属性filter,比如支持高斯模糊效果的blur(类似iOS7的效果):
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
IE8对filter: blur(10px)
的显示效果是对HTML元素进行小范围的模糊处理,这个效果并不是高斯模糊,要想支持高斯模糊,需要如下设置:
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
在实践中发现一个坑就是,所有position: relative
的元素都不会生效。
其他的发现是,IE9对filter: blur(10px)
无效,而对filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
是针对元素小范围的模糊效果。
(转载)最近总是遇到各种 IEbug,mark一下,学习到了,转载出处:http://www.cnblogs.com/ruomeng/p/5332814.html的更多相关文章
- (转载)林轩田机器学习基石课程学习笔记1 — The Learning Problem
(转载)林轩田机器学习基石课程学习笔记1 - The Learning Problem When Can Machine Learn? Why Can Machine Learn? How Can M ...
- C++学习笔记【转载】
转载自:http://www.cnblogs.com/maowang1991/p/3290321.html 1.struct成员默认访问方式是public,而 class默认访问方式是private! ...
- CruiseControl.NET学习总结(转载)
前些日子,总结了一个NAnt的学习总结.后来就放下了,松散了一阵子.CruiseControl.NET(以下称CC.NET),是我在学习完NAnt以后才开始看的,当时学起来就是在网上疯狂的找资料.现在 ...
- 转载 JQuery中attr属性和JQuery.data()学习
转载原地址: http://www.cnblogs.com/yeminglong/p/5405745.html 用html直接data-key来存放,key必须全部小写. <div data-m ...
- Hive学习笔记【转载】
本文转载自:http://blog.csdn.net/haojun186/article/details/7977565 1. HIVE结构 Hive 是建立在 Hadoop 上的数据仓库基础构架. ...
- Linux文件操作学习总结【转载】
本文转载自: http://blog.csdn.net/xiaoweibeibei/article/details/6556951 文件类型:普通文件(文本文件,二进制文件).目录文件.链接文件.设备 ...
- web渗透 学习计划(转载)
作者:向生李链接:https://www.zhihu.com/question/21914899/answer/39344435来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...
- 治愈 JavaScript 疲态的学习计划【转载】
来源:伯乐在线 - Rose Wang 像其他人一样,最近我读了 Jose Aguinaga 的文章 <How it feels to learn JavaScript in 2016>. ...
- 毕设之c#多线程学习(官方+转载)
官方文档,原址:打开 如何:对 Windows 窗体控件进行线程安全调用 使用多线程提高 Windows 窗体应用程序的性能时,必须注意以线程安全方式调用控件. 示例 访问 Windows 窗体控 ...
随机推荐
- Watir RAutomation VS AutoIt to deal with popup
Watir使用过程中,经常遇到的弹出框分为几类: 1. Alert 2. Confirm 3. Prompt 4. File select Watir 处理弹出框,有很多方法,可以应用 AutoIt来 ...
- mysql分区表之四:分区表性能
一, 分区概念 分区允许根据指定的规则,跨文件系统分配单个表的多个部分.表的不同部分在不同的位置被存储为单独的表.MySQL从5.1.3开始支持Partition. 分区和手动分表对比 手 ...
- 蓝桥杯 2014本科C++ B组 奇怪的分式 暴力枚举
蓝桥杯 枚举 奇怪的分式 标题:奇怪的分式 上小学的时候,小明经常自己发明新算法.一次,老师出的题目是: 1/4 乘以 8/5 小明居然把分子拼接在一起,分母拼接在一起,答案是:18/45 (参见图1 ...
- 1.大量数据导出Excel 之 多重影分身之术
还未验证过...... 摘自:http://www.cnblogs.com/axing/archive/2012/05/25/Excel-65535.html http://www.cnblogs.c ...
- sizeToFit的学习与认知
今天一扫前两日的坏心情,终于有心情平静下来,今天我是根据网络上的一些资料进行学习,今天学习的内容是 sizeToFit() 方法在不方便手动布局的场景中的使用. 首先感谢资料的提供者:参考1 参考2 ...
- VS2008编了个MFC对话框,编译链接都没有问题,但是运行出来的对话框完全不能点击
误将整个对话框的属性中disable选为“True”,对话框不可用,选为false即可
- ** Error in `./g2o_viewer': realloc(): invalid pointer:
问题: defe@defe-Precision-Tower-3620:~/project/Demo/UseG2OforPoseGraph/useg2oforposegraph$ ./g2o_viewe ...
- 3、css边框以及其他常用样式
一.边框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- nodejs mac启动相关命令
redis: redis directory/src/redis-server redis-directory/redis.conf & mongodb: mongod &
- 洛谷 - P4450 - 双亲数 - 整除分块
https://www.luogu.org/fe/problem/P4450 应该不分块也可以. 求\(F(n,m,d)=\sum\limits_{i=1}^{n}\sum\limits_{j=1}^ ...