浏览器兼容

2016-07-21 本文已影响63人 _Josh

1 .如何调试 IE 浏览器.

IE7以上可以使用浏览器自带的开发者工具，IE6可以使用加边框的直观方式进行调试；

使用模拟器模拟不同版本的IE浏览器，如IEtester或者Test IE、Edge自带模拟器等；
安装虚拟机，在虚拟机内安装多个系统搭配不同版本IE浏览器来进行调试；

2.什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 ie6、ie7的 hack 方式？

针对不同厂商浏览器或者同一浏览器不同版本之中的bug，写的一些非常规的样式来达到想要表现的效果的过程叫css hack。

CSS Hack大致有3种表现形式:CSS属性前缀法、选择器前缀法、IE条件注释法（即HTML头部引用if IE）Hack，实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

属性前缀法(即类内部Hack)：例如 IE6能识别下划线""和星号" * "，IE7能识别星号" * "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识。
```
background:black; /* for all browsers */
_background:red; /* for ie6*/
*background:green; /* for ie6~7 */
background:blue\9; /* for ie6~10 */
```

选择器前缀法(即选择器Hack)：例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}。
```
*html .class{}/* for IE6 */
*+html .class{}/* for IE7 */
*:first-child+html .class{}/* for IE7 */
```
IE条件注释法(即HTML条件注释Hack)：针对所有IE(注：IE10+已经不再支持条件注释)：，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。

只在IE下生效
 <!--[if IE]> 
<link rel="stylesheet" type="text/css" href="ie.css"> 
<![endif]--> 
只在IE6下生效
 <!--[if IE 6]> 
<link rel="stylesheet"type="text/css"href="ie6.css">
 <![endif]--> 
只在IE6以上版本生效
 <!--[if gte IE 6]> 
这段文字只在IE6以上(包括)版本IE浏览器显示
 <![endif]--> 
非IE浏览器生效 
<!--[if !IE]> 这段文字只在非IE浏览器显示 
<![endif]-->```
----

3.列举几种 浏览器兼容问题.

* ` display:inline-block;/*IE8以下不支持*/`
方法:添加`display:inline`尽可能正常展示页面功能
* `opacity:0.4;/*IE8部分支持，IE8以下不支持*/`
方法:添加`filter:alpha(opacity=50);`设置

[【CSS】最全的CSS浏览器兼容问题](https://www.douban.com/group/topic/4629864/)

----

4.针对兼容、多浏览器覆盖有什么看法？**渐进增强**和**优雅降级**是什么意思？

* 分析需求，对于上级或客户需求兼容的低版本浏览器需全部兼容；
* 对于低版本只要大局显示不影响，功能能实现，可以不刻意追求美观上样式的一致；
* 分析浏览器占用率，一般低于一定占用率的浏览器可以选择不兼容；

①. **渐进增强：**
   * 一开始只构建站点的最少特性，然后不断针对各浏览器追加功能;
    * 从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能。渐进增强是值得所有开发者采用的做法。渐进增强方案并不假定所有用户都支持javascript，而总是提供一种候补方法，确保用户可以访问（主要的）内容;
    * 使用渐进增强时，无需为了一个已成型的网站在旧式浏览器下正常工作而做逆向工程。首先，只需要为所有的设备和浏览器准备好清晰且语义化的HTML以及完善的内容，然后再以无侵入（unobtrusive）的方式向页面增加无害于基础浏览器的额外样式和功能。当浏览器升级时，它们会自动地呈现出来并发挥作用;

②. **优雅降级：**

   *  一开始就构建站点的完整功能，然后针对浏览器测试和修复;
    * 使用优雅降级方案，Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，绝大多数Web设计师和开发者都通过专门的样式表或针对不同版本的IE的hack实践过优雅降级了；
    * 使用优雅降级技术时，你必须首先完整的实现了网站，其中包括所有的功能和效果。然后再为那些无法支持所有功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效;

----

5.`reset.css`和normalize.css分别是做什么的？为什么推荐使用` nomalize.css`?

**Reset.css: **统一各个版本浏览器默认Html标签样式，直接重置所有原浏览器默认样式，再添加统一的标准默认样式；
**normalize.css：**统一各个版本浏览器默认Html标签样式，只重置统一浏览器默认样式中有差异的部分样式；

推荐使用Normalize的好处：
* Normalize.css 保护了有价值的默认值；
* Normalize.css 修复了浏览器的bug
* Normalize.css 不会让你的调试工具变的杂乱；
* Normalize.css 是模块化的；
* Normalize.css 拥有详细的文档。

[Normalize.Css介绍和使用，Normalize与CSS Reset的区别](http://www.yxxme.com/1034.html)

----

6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?`box-sizing:border-box`有什么作用?

![IE盒子](https://img.haomeiwen.com/i1043191/edad806a8791b5e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![标准盒模型](https://img.haomeiwen.com/i1043191/28f38945d9983944.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

***使用IE6、7、8使用标准盒模型：***
* 添加声明`<!DOCTYPE html>
`

***box-sizing:border-box作用:***
           
 * 为元素设定的宽度和高度决定了元素的边框盒。即使盒子模型设定为IE盒模型，设定宽高包含内边距和边框和内容宽度；

----
                 本文版权归作者饥人谷_Josh和饥人谷所有，转载请注明来源

----

浏览器兼容

猜你喜欢

热点阅读