美文网首页饥人谷技术博客
任务13-浏览器兼容

任务13-浏览器兼容

作者: 嘿菠萝 | 来源:发表于2016-07-22 11:10 被阅读15次

    2016/6/6

    可以装个虚拟机,用于调试IE的兼容


    1.如何调试 IE 浏览器

    • IE浏览器7以上+自带的开发者工具,ie6可以用加border的方法
    • 采用模拟器的方式去模不同版本下的IE浏览器,如ietester
    • 通过安装虚拟机的方式,安装不同版本的IE的运行环境去达到调试IE浏览器的目的

    2.什么是CSS hack?在 CSS 和 HTML里如何写 hack?在 CSS 中 ie6、ie7的 hack 方式?

    • CSS hack由于不同厂商的浏览器,比如Internet Explorer,Safari,Mozilla Firefox,Chrome等,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS,让它能够同时兼容不同的浏览器,能在不同的浏览器中也能得到我们想要的页面效果。 简单的说,CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然,我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。

    • CSS Hack大致有3种表现形式,CSS属性前缀法、选择器前缀法以及IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
      1.属性前缀法(即类内部Hack):例如 IE6能识别下划线""和星号" ",IE7能识别星号" ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识
      2.选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}
      3.IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效
      <!-[if IE]>这段文字只是在IE浏览器下显示<![endif]->
      <!-[if IE6]>这段文字只是在IE6显示器生效<![endif]->
      <!-[if get IE6]>这段文字只是在IE6以上(包括)版本IE浏览器显示<![endif]->
      <!-[if !IE8]>这段文字在非IE浏览器下显示<![endif]>
      <!-[if ! IE]>这段文字只是在非IE浏览器下显示<![endif]>
      参考资料

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

    • hover IE6不支持,以上的IE只支持a标签的hover
    • display:inline-block ie67不支持。
    • max-height,max-width等一系列,IE6不支持
    • padding,margin在不同浏览器默认样式有差异
    • 在ie6下块元素有浮动和横向margin值,横向的margin值会被放大成2倍,解决方法:display:inline
    • 在ie6下父级有边框的时候,子元素的margin值消失,解决方法:触发haslayout

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

    看法:对于兼容有有的放矢,分清主次,针对主流浏览器去开发,同时要兼顾用户需求,遇到一个问题解决一个,先完成基本功能和样式的实现,再完善细节。
    优雅降级:在前面的开发中,先不用考虑一些低的版本的浏览器,等开发完成之后慢慢地去做一个适应,只要页面还正常,不乱,看着还可以就OK了,没必要去追求特别高的还原度。
    渐进增强:先针对ie6去做开发,再对一些好的浏览器增加一些额外的一些效果,让它看起来更好看一些。

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

    • reset.css:是用于去除浏览器预先给标签设置的默认样式。
    • normalize.css:normalize.css是reset.css的改良版,他是在reset的基础上进行改良避免误伤,保留了一些有价值的默认样式,还增加了其他功能,也没有reset.css 的一些缺点。
    • 为什么使用nomalize.css?
    1. Normalize.css 保护了有价值的默认值,这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。
    2. Normalize.css 修复了浏览器的bug
    3. Normalize.css 不会让你的调试工具变的杂乱
    4. Normalize.css 是模块化的
    5. Normalize.css 拥有详细的文档
      参考资料

    6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?box-sizing:border-box有什么作用

    • IE盒模型:宽度=内容宽度+padding+边框。
    • 标准盒模型:宽度=内容宽度。
      *要使ie6 7 8 使用标准盒模型:
      (1)可以在开头添加<!doctype html>来使用标准盒模型。
      (2)box-sizing:border-box 使元素按照ie盒模型计算,宽度=border+padding+内容宽度。

    7.在 ie 6, 7, 8中展示 盒模型、inline-block、max-width的区别

    • IE6 inline-block、max-width完全失效
    • IE7 inline-block完全失效 max-width 仅起一定作用
    • IE8 两者都能正常使用
      老师,还没有装虚拟机~

    相关文章

      网友评论

        本文标题:任务13-浏览器兼容

        本文链接:https://www.haomeiwen.com/subject/hwlijttx.html