首页 > 代码库 > 笔记5.10
笔记5.10
前期准备
测试IE兼容性必须要在Windows中测，而且是Win7+，因为WinXP最高只支持IE8，IE9就呵呵啦！大部分做
Web的童鞋都不是使用Windows做为开发环境，要么是Linux发行版，要么是Mac OS。怎么办？一般有2种
方法：
开Windows虚拟机
将开发环境暂时切换到Windows
如果你的机器足够快，我推荐前一种方式。但我之前是在二手电脑上开发的，开虚拟机简直卡出翔了，
所以采用了第二种方法。如果你是Pythoner，我之前写的一篇日志《在Windows中搭建Python Web开发环
境》可能会对你有点用处。
然后需要在Win7里安装用于测试的浏览器，查了下百度给出的最近一个月浏览器份额，也不知道准不准
哈：
我觉得需要测的大概有：IE11、IETester（IE8-IE9）、360浏览器、搜狗浏览器、Chrome、Firefox、
Safari for Windows。IETester测完了建议再用真实的IE8、IE9测一遍，以防万一。Safari最好还是找
苹果设备实测。
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
Bootstrap3中使用了大量的Media Query特性，但是IE8似乎无法识别，所以需要hack一下啦！
Bootstrap3的官方文档中已经针对浏览器兼容性做了比较详细的说明，推荐采用Respond.js解决此问题
，具体方法参见它的文档即可。
有一个地方需要注意的是，如果对Bootstrap3 media query声明的属性（比如.container）进行覆盖，
那在不支持media query的浏览器中Respond.js起作用后，会把你的覆盖样式再次覆盖。我的解决方案是
在后面加上!important。
实现CSS3的某些特性
IE8不支持CSS3的很多新特性，不过我们可以使用一些比较成熟的hack方法，我采用的是CSS3 PIE，它支
持的特性有这些：border-radius、box-shadow、border-image、multiple background images、
linear-gradient等。
官方文档给出了2种使用方式，一种是引入.htc文件，另一种则是使用PIE.js。如果使用第一种方法（官
方推荐），那么需要设置.htc文件的Content-Type为text/x-component。这个也好办，如果你是通过
nginx来托管此文件，只要在Nginx的配置文件中加入一条MIME规则即可。我建议使用Flask来托管它（放
在static文件夹中），这样更方便，然后只需加入下面的代码：
import mimetypes
mimetypes.add_type(‘text/x-component‘, ‘.htc‘)
特别注意：请一定阅读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="http://www.mamicode.com/#" class="work-link">
<img src="http://www.mamicode.com/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=http://www.mamicode.com/URL)
将sizingMethod设置为scale就OK了。
还没完，如果你在此背景之上放置了链接，那这个链接是无法点击的。一般情况下的解决办法是为链接
或按钮添加position:relative使其相对浮动。
好了，目前来说我所遇到的IE8+兼容性问题就这些啦。前端和后端我都做一点，这样的好处在于一个人
能够独立开发网站，坏处就是各方面都不精。如果你有蛮重要的补充，或者更好的解决方法，欢迎告诉
我！
PS: 最近做了些IE7兼容方面的工作，相关的经验见IE7+兼容。
<div style="display:inline">块变内联 </div><span style="display:block">内联变块</span>
内联元素(inline element)一般都是基于语义级(semantic)的基本元素。内联元素只能容纳文本或者其他内联元素，常见内联元素"a"。
块元素(block element)和内联元素(inline element)都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都从新行开始。而当加入了css控制以后，块元素和内联元素的这种属性差异就不成为差异了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>28-优先级之权重问题</title>
<style>
/*
#identity1 .box2{
color: red;
}
.box1 .box2{
color: green;
}
div ul li p{
color: blue;
}
*/
/*
.box1 .box2{
color: blue;
}
div .box2{
color: green;
}
*/
/*
#identity1 ul li p{
color: red;
}
#identity1 ul p{
color: green;
}
*/
/*
.box1 li #identity2{
color: blue;
}
#identity1 ul .box2{
color: red;
}
*/
.box2{
color: red;
}
li{
color: blue;
}
</style>
</head>
<body>
<!--
1.什么是优先级的权重?
作用: 当多个选择器混合在一起使用时, 我们可以通过计算权重来判断谁的优先级最高
2.权重的计算规则
2.1首先先计算选择器中有多少个id, id多的选择器优先级最高
2.2如果id的个数一样, 那么再看类名的个数, 类名个数多的优先级最高
2.3如果类名的个数一样, 那么再看标签名称的个数, 标签名称个数多的优先级最高
2.4如果id个数一样, 类名个数也一样, 标签名称个数也一样, 那么就不会继续往下计算了, 那么此时谁写在后面听谁的
也就是说优先级如果一样, 那么谁写在后面听谁的
注意点:
1.只有选择器是直接选中标签的才需要计算权重, 否则一定会听直接选中的选择器的
-->
<div id="identity1" class="box1">
<ul>
<li>
<p id="identity2" class="box2">我是段落</p>
</li>
</ul>
</div>
</body>
</html>
笔记5.10