DOCTYPE

首先需要确保HTML页面开始部分要有DOCTYPE声明。DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档，具体会影响：

1.对标记,attributes,properties的约束规则

2.对浏览器的渲染模式产生影响，不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析

DOCTYPE是非常关键的，目前的最佳时间就是在HTML文档的首行键入

  1. <!DOCTYPE html>

使用meta标签调节浏览器的渲染方式

IE8中有一个“兼容性试图”的概念，当初IE8发布时，相对于IE6/7已经做出了非常大的改进，但是很多老站点仅针对IE6/7进行了优化，使用IE8渲染反而会一团糟，为了照顾这些苦逼的前端工程师，IE8加入了“兼容性视图”功能，这样的话就可以在IE8中使用IE6或IE7的内核渲染页面。这个当然不是我们想要的，所以需要使用meta标签来强制IE8使用最新的内核渲染页面

  1. <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内核来渲染。

国内存在很多双内核浏览器比如360浏览器，搜狗浏览器，他们是怎么决定某页面到底使用哪种内核渲染？下面引用一段360浏览器v6新特性的官方说明

"由于众所周知的情况，国内的主流浏览器都是双核浏览器：基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例，我们优先通过Webkit内核渲染主流的网站，只有小量的网站通过IE内核渲染，以保证页面兼容。在过去很长一段时间里，我们主要的控制手段是一个几百k大小网址库，一个通过长期人工运营收集的网址库。

尽管我们努力通过用户反馈、代码标签智能判断技术提高浏览器的自动切核准确率。但是在很多情况下，我们仍然无法达到百份百正确。因此，我们新增加了一个控制手段：内核控制Meta标签。只要你在自己的网站里增加一个Meta标签，告诉360浏览器这个网址应该用哪个内核渲染，那么360浏览器就会在读取到这个标签后，立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。"


解决方法360已经告诉我们通过meta标签的方式建议其使用Webkit，代码如下：

  1. <meta name="renderer" content="webkit">

Media Query

IE8似乎无法识别Media Query，所以需要hack一下。
实现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中却是可以的，经查询发现不奏效，而在Chrome中却是可以的。经查询发现需要给table设置table-layout：fixed，对此属性的具体解释见W3School

2.嵌套标签中的max-width

如下的HTML结构

  1. <div class="work-item">
  2.     <a href="#" class="work-link">
  3.         <img src="sample.jpg" class="work-image img-responsive">
  4.     </a>
  5. </div>

最外层元素.work-item设置了固定宽度，但是对img设置max-width为100%却无效，后来才发现需要在对a标签设置width:100%,这样才能使最内层的img标签充满整个div

嵌套inline-block下padding元素重叠

HTML代码

  1. <ul>
  2.     <li><a></a></li>
  3.     <li><a></a></li>
  4.     <li><a></a></li>
  5. </ul>

CSS代码

  1. ul li{
  2.     display: inline-block;
  3. }
  4. ul li a{
  5.     display: inline-block;
  6.     padding: 10px 15px;
  7. }

按理来说a标签之间的距离应该是30PX，但在IE8中出现了重叠，只有15px。

我的解决方法是使用float：left替代display：inline-block实现水平布局。

placeholder

IE8不支持HTML5属性placeholder，不过为解决此问题的js插件挺多的，比如：jquery-placeholder

last-child

last-child是CSS2中的内容，但是last-child就不是了，所以IE8不买帐。推荐的做法不是使用last-child,而是给最后元素设置一个.last的Class。然后对此进行设置。

background-size:cover

如果你想使用background-size:cover设置背景，很遗憾IE8办不到，但可以使用IE独有的AlphaImageLoader滤镜来实现，添加一条如下的CSS样式

  1. filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=Enabled, sizingMethod=Size , src=URL)

将sizingMethod设置为scale就OK了

如果你在此背景之上放置了链接，那这个链接是无法点击的，一般情况下的解决办法是为连接或按钮添加position:relative使其相对浮动

filter blur

CSS3中提供支持滤镜效果的属性filter，比如支持高斯模糊效果的blur

  1. filter: blur(10px);
  2. -webkit-filter: blur(10px);
  3. -moz-filter: blur(10px);

IE8对filter:blur（10px）的显示效果是对HTML元素进行小范围的模糊处理，这个效果并不是高斯模糊，要想支持高斯模糊，需要设置

  1. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='');

在实践中发现一个坑就是，所有position:relative的元素都不会生效

其他的发现是，IE9对filter:blur（10px）无效，而对filter:progid:DXImageTransform.Mucrosoft.Blur(PixelRadius='10');是针对元素小范围模糊的模糊效果

IE8兼容性经验小结的更多相关文章

  1. IE8+兼容经验小结

    最近一段时间,我都使用Flask+Bootstrap3的框架组合进行开发.本文就是在这种技术组合下,分享IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的 ...

  2. (转载)IE8+兼容经验小结

    本文分享下我在项目中积累的IE8+兼容性问题的解决方法.根据我的实践经验,如果你在写HTML/CSS时候是按照W3C推荐的方式写的,然后下面的几点都关注过,那么基本上很大一部分IE8+兼容性问题都OK ...

  3. Unity3d 经验小结

      Unity3d 经验小结 文本教程 你是第2541个围观者 0条评论 供稿者:Jamesgary 标签:unity3d教程 Fbx.贴图导入Unity时的注意事项: 在导出Fbx之前,Maya中已 ...

  4. bootstrap IE8 兼容性处理

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  5. CSS- ie6,ie7,ie8 兼容性写法,CSS hack写法

    css ie6,ie7,ie8 兼容性写法,CSS hack写法 margin-bottom:40px;       /*ff的属性*/margin-bottom:140px\9;    /* IE6 ...

  6. DevExpress使用教程：GridView经验小结(官方中文文献经典资料技巧)

    下面是笔者自己总结的使用 DevExpress Gridview 的一些经验小结,分享给大家: 1.去除 GridView 头上的 "Drag a column header here to ...

  7. ie8兼容性总结

    DOCTYPE 首先需要确保你的HTML页面开始部分要有DOCTYPE声明.DOCTYPE告诉浏览器使用什么样的HTML或XHTML规范来解析HTML文档,具体会影响: 对标记.attributes ...

  8. 基于webmagic的爬虫项目经验小结

    大概在1个月前,利用webmagic做了一个爬虫项目,下面是该项目的一些个人心得,贴在这里备份: 一.为什么选择webmagic? 说实话,开源的爬虫框架已经很多了,有各种语言(比如:python.j ...

  9. ie8兼容性（不支持trim 、readonly光标、乱码encodeURI()）

    IE8下String的Trim()方法失效的解决方案 1.用jquery的trim()方法,$.trim(str)就可以了. 2.String扩展: 第一种 String.prototype.trim ...

随机推荐

  1. 【leedcode】add-two-numbers

    You are given two linked lists representing two non-negative numbers. The digits are stored in rever ...

  2. 【原创】Android selector选择器无效或无法正常显示的一点研究

    想将LinearLayout作为一个按钮,加上一个动态背景,按下的时候,背景变色,这个理所当然应该使用selector背景选择器来做: <LinearLayout android:id=&quo ...

  3. 使用WKWebView遇到的坑

    苹果从iOS8开始推出了WKWebView,大有替换UIWebView的意思(尽管Xcode中还没给UIWebView标记过期版本),所以决定将项目进行适配,iOS8及以上版本,改用WKWebView ...

  4. sql 中convert和cast区别

    SQL中的cast和convert的用法和区别 更多 来源:SQL学习浏览量: 学习标签: cast convert sql 本文导读:SQL中的cast 和convert都是用来将一种数据类型的表达 ...

  5. python file operations

    原文地址 总是记不住API.昨晚写的时候用到了这些,但是没记住,于是就索性整理一下吧: python中对文件.文件夹(文件操作函数)的操作需要涉及到os模块和shutil模块. 得到当前工作目录,即当 ...

  6. 解决web浏览器与servlet之间传输数据时出现的乱码问题

    1.使用getParam等方法获取请求参数时遇到乱码 浏览器发送的请求参数使用的编码就是打开网页时使用的编码.如果服务器端获取到发过来的请求参数,默认使用ISO8859-1进行解码操作,中文一定会有乱 ...

  7. Webform 文件上传、 C#加图片水印 、 图片验证码

    文件上传:要使用控件 - FileUpload 1.如何判断是否选中文件? FileUpload.FileName - 选中文件的文件名,如果长度不大于0,那么说明没选中任何文件 js - f.val ...

  8. oracle同一个数据库实例不同的用户之间的表、序列授权操作

    1.背景:用户jtuser中有jtproduct中表A,B的同义词,在用户jtuser中向表A,B插入数据,提示“权限不够” 2.将A,B表授权给jtuser用户 $ sqlplus / as sys ...

  9. c语言二维数组求最大值

    #include<stdio.h> int main() { ,colum=,max; ][]={{,,,},{,,,},{-,,-,}}; max=a[][]; ;i<=;i++) ...

  10. [liusy.api-SMJ]-创建工程范例 MAVEN archetype 学习阶段（一）

    由于这个架构需要好多不同能力的工程,为了创建方便减少冗余,创建工程范例尤为重要 学习阶段: 参考资料 http://maven.apache.org/archetype/maven-archetype ...