浏览器兼容（13）
2016-11-19 本文已影响30人
吴晗君
css hack
文档模式ie7
文档模式ie10
ie6
ie8
chrome
问题
一、如何调试 IE 浏览器？
- 使用高版本的ie控制台查看盒模型
- 低版本ie使用border:1px solid
- 也可使用outline：1px solid(特点是不占空间，不是每个版本都支持)
- 用
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浏览器显示（用的是文档模式） <![endif]-->
我们也可以用
- gte:grater than equal
- lte:less than equal
- lt:less than
- 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，我们可以使用时查询得知查询地址
三、列举几种 浏览器兼容问题
- 盒模型：标准盒模型width=content area IE678则是IE盒模型：width=2*(border+padding+content area)
- 不同浏览器的标签默认的外补丁和内补丁不同
- 块属性标签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优点：
- 保护了有价值的默认值
- 修复了部分浏览器的bug
- 不会让你的调试工具变的杂乱
- 是模块化的
- 拥有详细的文档
六、IE盒模型和标准盒模型有什么区别? 怎样使 IE7、8使用标准盒模型?box-sizing:border-box有什么作用？
- IE盒模型：width=2*(padding+border)+content
- 标准盒模型：width=content
在ie7、8添加<!doctype html>并且前面没有加其他语句干扰到声明文档类型。 - 'box-sizing:border-box' 声明了IE盒模型
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;"> </div>
操作
ie6
ie8
chrome
问题
一、如何调试 IE 浏览器？
- 使用高版本的ie控制台查看盒模型
- 低版本ie使用border:1px solid
- 也可使用outline：1px solid(特点是不占空间，不是每个版本都支持)
- 用
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浏览器显示（用的是文档模式） <![endif]-->
我们也可以用
- gte:grater than equal
- lte:less than equal
- lt:less than
- 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，我们可以使用时查询得知查询地址
三、列举几种 浏览器兼容问题
- 盒模型：标准盒模型width=content area IE678则是IE盒模型：width=2*(border+padding+content area)
- 不同浏览器的标签默认的外补丁和内补丁不同
- 块属性标签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优点：
- 保护了有价值的默认值
- 修复了部分浏览器的bug
- 不会让你的调试工具变的杂乱
- 是模块化的
- 拥有详细的文档
六、IE盒模型和标准盒模型有什么区别? 怎样使 IE7、8使用标准盒模型?box-sizing:border-box有什么作用？
- IE盒模型：width=2*(padding+border)+content
- 标准盒模型：width=content
在ie7、8添加<!doctype html>并且前面没有加其他语句干扰到声明文档类型。 - 'box-sizing:border-box' 声明了IE盒模型
<div style="height:200px;width:200px;border:solid 10px #333;padding:100px;box-sizing: border-box;"> </div>
操作
加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
