浏览器兼容方法

• 首先确定是否兼容
  1.是否兼容IE
  2.兼容到什么程度（A级（100%）：chrome，FF，IE 9+；B级：IE 8；C级：IE 7）
• 如何兼容
  1.cc（IE conditional comments 条件注释）（IE 9以下的版本）
  2.``````(lt：less than、gte：great than equal...)
  3.property hacks（*）
  4.browserhacks

如何调试IE浏览器

• 高版本可以使用控制台
• 加边框：border：1px solid；
• 加outline：outline：1px solid blue；
• 使用JS（地址栏输入）：javascript：alert(document.get...)

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

• CSS hack：利用浏览器的某些特性来实现特使的样式
• 如何写hack：
  1.cc（IE conditional comments 条件注释）（IE 9以下的版本）
  ``````(lt：less than、gte：great than equal...)
  2.property hacks
  例如 IE6能识别下划线""和星号" "，IE7能识别星号" "，但不能识别下划线""，IE6~IE10都认识"\9"，但firefox前述三个都不能认识
  3.选择器前缀法(即选择器Hack)
  例如 IE6能识别html .class{}，IE7能识别+html .class{}或者*:first-child+html .class{}
• IE7、8中
  [if (IE 7)|(IE 8)]

列举几种 浏览器兼容问题

• IE6，IE7不支持block元素设置为inline-block
  解决办法：让块元素设置为内联对象呈递（设置属性display:inline），然后触发块元素的layout（如：zoom:1（触发IE的BFC/haslayout） 或float属性等）。

div { 
display:inline-block; 
*zoom:1;
*display:inline;}

• IE6不支持除了a标签以外的hover
  解决办法：将需要加hover类的标签改为a标签
  <a href="javascript:;">...</a>
• IE 8 以下不兼容border-radius
• 每种浏览器默认边距样式都不一样，一般会重置外边距与内边距为零

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

• 兼容多浏览器：考虑不同浏览器的市场份额，兼容主流的浏览器，对于市场份额太低的浏览器可以适当放弃
• 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后在针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验
• 优雅降级：针对高版本浏览器进行页面构建，然后再针对低版本浏览器进行兼容

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

• reset.css：在HTML标签在浏览器里有默认的样式，例如 p 标签有上下边距，strong标签有字体加粗样式，em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别，例如ul默认带有缩进的样式，在IE下，它的缩进是通过margin实现的，而Firefox下，它的缩进是由padding实现的。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性
• Normalize.css 是一个可定制的 CSS 文件，使浏览器呈现的所有元素，更一致和符合现代标准;是在现代浏览器环境下对于CSS reset的替代。 它正是针对只需要统一的元素样式。该项目依赖于研究浏览器默认元素风格之间的差异，精确定位需要重置的样式。 这是一个现代的，HTML5-ready 的 CSS 重置样式集

• Preserves useful defaults, unlike many CSS resets. - 保护有用的浏览器默认样式而不是完全去掉它们• Normalizes styles for a wide range of elements. - 为大部分HTML元素提供一般化的样式
• Corrects bugs and common browser inconsistencies. - 修复浏览器自身的bug并保证各浏览器的一致性
• Improves usability with subtle improvements. - 用一些小技巧优化CSS可用性
• Explains what code does using detailed comments. - 用注释和详细的文档来解释代码

• 比较：

• 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中有进一步的说明。这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异，并且你可以更容易地进行自己的测试。 这个项目的目标是帮助人们了解浏览器默认是如何渲染元素的，同时也让人们很容易地明白如何改进浏览器渲染。

IE盒模型和标准盒模型有什么区别? 怎样使 IE7、8使用标准盒模型?box-sizing:border-box有什么作用

• 标准盒模型：width=content
• IE盒模型：width=content+padding+border
• IE使用标准盒模型：在HTML中设置声明Doctype
• box-sizing：border-box；固定盒子大小；任何padding和边框都在盒子内进行改变。计算方法为width=content+padding+border，表示指定的宽度和高度包含边框、内边距和内容区域。 即IE盒模型算法

操作题

1. windows xp虚拟机

   
   ie7.PNG
   ie8.PNG
2. 盒模型、inline-block、max-width的区别

• 严格模式下，IE7，IE8都使用标准盒模型，都支持max-width；IE8支持inline-block，IE7不支持inline-block

  
  IE7
  IE8

• 混乱模式下，IE7，IE8都使用IE盒模型，都不支持max-width，都不支持inline-block

  
  IE7
  IE8

本教程版权归饥人谷和作者所有，转载须说明来源。