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浏览器显示（用的是文档模式） <![endif]-->
    我们也可以用
  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添加<!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 浏览器？

  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浏览器显示（用的是文档模式） <![endif]-->
    我们也可以用
  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添加<!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
举报
收藏
赞
评论加载中...
牛客博客，记录你的成长
关于博客 意见反馈 免责声明 博文推荐 牛客网首页
公司地址：北京市朝阳区北苑路北美国际商务中心K2座一层
联系方式：010-60728802(电话)
admin@nowcoder.com
京ICP备14055008号-1
京公网安备 11010502036488号