浏览器兼容（13）

css hack

文档模式ie7

文档模式ie10

ie6

ie8

chrome

问题

一、如何调试 IE 浏览器？

1. 使用高版本的ie控制台查看盒模型
2. 低版本ie使用border:1px solid
3. 也可使用outline：1px solid(特点是不占空间，不是每个版本都支持)
4. 用javascript:alert(document.getElementsByTagName("div")[0].style.border="1px solid red")加边框

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

• 由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
• HTML里面：conditional comments cc:ie条件备注
  <--[if IE]> 这段文字只在ie19及以下ie浏览器显示（用的是文档模式）
  我们也可以用

1. gte:grater than equal
2. lte:less than equal
3. lt:less than
4. gt:grater than

• CSS里面：
  Property（特性、属性） hack
  以display:inline-block为例

  
  
  

  css hack
  
  
  

  文档模式ie7
  
  
  

  文档模式ie10
  
  

  得到结论：inline-block在ie8及以上兼容。

• 使用*zoom:1;
  *display:inline;后ie全系列都显示为并排排列。
• ie7 8的hack方式不为conditional comments或者property hack，我们可以使用时查询得知查询地址

三、列举几种 浏览器兼容问题

1. 盒模型：标准盒模型width=content area IE678则是IE盒模型：width=2*(border+padding+content area)
2. 不同浏览器的标签默认的外补丁和内补丁不同
3. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
   参考

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

• 全局趋势：现在的设计和开发的策略是浏览器分级支持。优先为高端浏览器设计，同时考虑低端浏览器的退化方案。甚至有些复杂的应用可以拒绝ie6，提示用户使用高端浏览器。因此不要再考虑向后兼容，应该考虑向后退化，更多考虑向前兼容。
• 工作要求：看该网站用户浏览器所占比例和公司要求，一般用户浏览器占比3~5%以下就不考虑过多的样式兼容，只要该页面能在其浏览器下正常显示其应有的框架功能即可。
• 渐进增强：针对低版本浏览器（ie67）进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

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

reset.css通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。
normalize.css相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式.user agent(UA)它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
normalize.css优点：

1. 保护了有价值的默认值
2. 修复了部分浏览器的bug
3. 不会让你的调试工具变的杂乱
4. 是模块化的
5. 拥有详细的文档

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

• IE盒模型：width=2*(padding+border)+content
• 标准盒模型：width=content
  在ie7、8添加并且前面没有加其他语句干扰到声明文档类型。
• 'box-sizing:border-box' 声明了IE盒模型
  

操作

ie6

ie8

chrome

问题

一、如何调试 IE 浏览器？

1. 使用高版本的ie控制台查看盒模型
2. 低版本ie使用border:1px solid
3. 也可使用outline：1px solid(特点是不占空间，不是每个版本都支持)
4. 用javascript:alert(document.getElementsByTagName("div")[0].style.border="1px solid red")加边框

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

• 由于不同厂商的流览器或某浏览器的不同版本（如IE6-IE11,Firefox/Safari/Opera/Chrome等），对CSS的支持、解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同版本写特定的CSS样式，我们把这个针对不同的浏览器/不同版本写相应的CSS code的过程，叫做CSS hack!
• HTML里面：conditional comments cc:ie条件备注
  <--[if IE]> 这段文字只在ie19及以下ie浏览器显示（用的是文档模式）
  我们也可以用

1. gte:grater than equal
2. lte:less than equal
3. lt:less than
4. gt:grater than

• CSS里面：
  Property（特性、属性） hack
  以display:inline-block为例

  
  
  

  css hack
  
  
  

  文档模式ie7
  
  
  

  文档模式ie10
  
  

  得到结论：inline-block在ie8及以上兼容。

• 使用*zoom:1;
  *display:inline;后ie全系列都显示为并排排列。
• ie7 8的hack方式不为conditional comments或者property hack，我们可以使用时查询得知查询地址

三、列举几种 浏览器兼容问题

1. 盒模型：标准盒模型width=content area IE678则是IE盒模型：width=2*(border+padding+content area)
2. 不同浏览器的标签默认的外补丁和内补丁不同
3. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
   参考

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

• 全局趋势：现在的设计和开发的策略是浏览器分级支持。优先为高端浏览器设计，同时考虑低端浏览器的退化方案。甚至有些复杂的应用可以拒绝ie6，提示用户使用高端浏览器。因此不要再考虑向后兼容，应该考虑向后退化，更多考虑向前兼容。
• 工作要求：看该网站用户浏览器所占比例和公司要求，一般用户浏览器占比3~5%以下就不考虑过多的样式兼容，只要该页面能在其浏览器下正常显示其应有的框架功能即可。
• 渐进增强：针对低版本浏览器（ie67）进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
• 优雅降级：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

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

reset.css通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。
normalize.css相对「平和」，注重通用的方案，重置掉该重置的样式，保留有用的 user agent 样式.user agent(UA)它是一个特殊字符串头，使得服务器能够识别客户使用的操作系统及版本、CPU类型、浏览器及版本、浏览器渲染引擎、浏览器语言、浏览器插件等。
normalize.css优点：

1. 保护了有价值的默认值
2. 修复了部分浏览器的bug
3. 不会让你的调试工具变的杂乱
4. 是模块化的
5. 拥有详细的文档

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

• IE盒模型：width=2*(padding+border)+content
• 标准盒模型：width=content
  在ie7、8添加并且前面没有加其他语句干扰到声明文档类型。
• 'box-sizing:border-box' 声明了IE盒模型
  

操作

加doctype

ie6

ie8

chrome

不加doctype

ie6no doctype

ie8 no doctype

ie8怪异

no doctype width=content

doctype

ie8 no doctype

chromebox-sizing:border-box

ie8:有doctype