我的前端学习笔记13——浏览器兼容问题

1，如何调试 IE 浏览器？

• 使用高版本浏览器（IE8以上）控制台进行调试。
• 将浏览器分级，市场份额多的优先着重考虑，小的适当考虑。
• 测试IE的方法

1，虚拟机。
2，远程虚拟机。
3，IE tester（不靠谱）。
4，某些IE可以开启浏览器模式。

• 使用border：1px solid； 、outline：1px solid color；或者在网页输入框输入javascript:进行调试；

2，什么是CSS hack？在 CSS 和 HTML里如何写 hack？在 CSS 中 IE 7、IE 8的 hack 方式？

• 什么是CSShack：
  由于不同厂商的流览器或某浏览器的不同版本（如IE6~IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器、不同版本写相应的CSS code的过程，叫做CSS hack。

---

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

一般这样使用：

• 类内属性前缀法

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

• hover兼容性问题：
  hover在IE6/7只有a链接才可以用，其他用法均无效，因此解决措施为：

把需要引用hover的元素换成a链接

但是这里有一个问题：换成a链接之后点击就会出现跳转，解决措施为：

用代码 `;` 代替链接，就不会发生跳转

---

• display:inline-block兼容性问题：
  display:inline-block不被IE6/7兼容，因此只能用inline代替。解决措施为：

`*` 只有IE浏览器会默认生效，其他浏览器不支持，视之为废码， `*` 可以只让IE6/7识别；zoom=1只有IE浏览器支持，可以触发IE浏览器的BFC(haslayout)。

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

• A级兼容(chrome、firefox、IE9+)：要保证在最新浏览器上完美实现设计稿；
• B级兼容(ie8)：能用且差别不大；
• C级兼容(ie7以下)：能用首先以最大程度完善设计稿为基础，再考虑兼容性，不能为盲目为了兼容问题而弃用方便简洁的新方法（如html5、css3）；
  (当然也不能用过新的技术方法使得兼容性过于低、实用性差)

---

渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

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

• reset.css
  在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。
• normalize.css
  Normalize.css是一种CSS reset的替代方案。Normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

---

Normalize vs Reset

1. Normalize.Css 保护了有价值的默认值。Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
2. Normalize.Css 修复了浏览器的Bug。它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。
3. Normalize.Css 不会让你的调试工具变的杂乱。使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题。
4. Normalize.Css 是模块化的。这个项目已经被拆分为多个相关却又独立的部分，这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。因此这能让你自己选择性地移除掉某些永远不会用到部分（比如表单的一般化）。
5. Normalize.Css 拥有详细的文档。Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。

6，IE盒模型和标准盒模型有什么区别? 怎样使 IE7、8使用标准盒模型?

W3C盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分，width= content

IE 盒子模型的范围包括 margin、border、padding、content，width=border+padding+content

---

**使 IE7、8 使 用 标 准 盒 模 型 的 方 法 **

7，box-sizing:border-box有什么作用？

• 令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度，模拟IE盒模型规范。