自学前端第二十七天:CSS高级之兼容问题

CSS高级之兼容问题

兼容处理

不同的用户会通过不同的浏览器访问我们的网站, 我们需要针对绝大部分主流用户浏览器进行兼容处理 . 兼容处理主要包括两种方案(优雅度降级, 渐进增强) 和
两种 技巧(前缀兼容[这个可以用插件autoprefixer]与 HACK兼容[深入了解])

一.邀请用户升级浏览器

这种方式目前比较普遍 , 在用户通过老版浏览器登录网站的时候 通过服务判断用户 浏览器版本内核 从而返回升级页面. 省时省力 但是对用户不够友好

meta强制解析模式

x-ua-compatible 用来指定IE浏览器解析编译页面的model
x-ua-compatible 头标签大小写不敏感，必须用在 head 中，必须在除 title 外的其他 meta 之前使用。

使用一行代码来指定浏览器使用特定的文档模式。

2、在一些情况下，我们需要限定浏览器对文档的解析到某一特定版本，或者将浏览器限定到一些旧版本的表现中。可以用如下的方式： 使用这种写法，浏览器或者使用标准模式进行解析，或者使用 IE5 Quirks 模式进行解析。 3、为了测试，我们也可以使用下面的语句指定浏览器按照最高的标准模式解析页面。 4、多个模式的指定。我们可以用逗号分割多个版本，这种情况下，浏览器会从这个列表中选择一个他所支持的最高版本来使用标准模式进行渲染。如下面的例子，在IE8进行浏览时，将会使用IE7的标准模式进行渲染，因为他本身不支持IE9和IE10。

目前最实用的最新写法为

X-UA-Compatible定义浏览器的渲染方式； 如果存在客户端Chrome Frame并启用，那么浏览器访问页面会被Chrome内核渲染（这一点没太大意义，因为你开发的项目不能要求用户在客户端来安装Chrome Frame）；也就是说IE浏览器变身Chrome是可以的，但前提是客户端安装了Chrome Frame 使用IE内核浏览器来访问，会渲染至该浏览器的最高版本，比如你使用IE9浏览器，那么就算在兼容模式切换至IE7，但仍会渲染成IE9的样子（当然IE7浏览器是不会渲染成IE9的,不然想想都好美丽）。

※ 对多核浏览器(360 搜狗)等进行强制指定渲染内核 http://se.360.cn/v6/help/meta.html

//content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。

//若页面需默认用极速核，增加标签

//若页面需默认用ie兼容内核，增加标签： // 若页面需默认用ie标准内核，增加标签：

兼容前缀

不同浏览器因为内核不同,针对同一条css属性的兼容支持程度也不同,我们可以通过加 兼容前缀的方式 让一些标准样式在浏览器内可以使用。

浏览器前缀	浏览器
-webkit-	Google Chrome, Safari, Android Browser
-moz-	Firefox
-o-	Opera
-ms-	Internet Explorer, Edge
-khtml-	Konqueror

使用方式：

如果css样式在主流浏览器中需要加兼容前缀才能生效, 就先写兼容写法 最后写标准写法。

.selector {
   
  	-moz-box-shadow:2px 2px 5px #969696; /*firefox*/
	-webkit-box-shadow:2px 2px 5px #969696; /*webkit*/
	box-shadow:2px 2px 5px #969696; /*opera或ie9*/<