美文网首页
浏览器兼容

浏览器兼容

作者: _Josh | 来源:发表于2016-07-21 21:57 被阅读63次

    1 .如何调试 IE 浏览器.

    • IE7以上可以使用浏览器自带的开发者工具,IE6可以使用加边框的直观方式进行调试;
    • 使用模拟器模拟不同版本的IE浏览器,如IEtester或者Test IE、Edge自带模拟器等;
    • 安装虚拟机,在虚拟机内安装多个系统搭配不同版本IE浏览器来进行调试;

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

    • 针对不同厂商浏览器或者同一浏览器不同版本之中的bug,写的一些非常规的样式来达到想要表现的效果的过程叫css hack。

    CSS Hack大致有3种表现形式:CSS属性前缀法、选择器前缀法、IE条件注释法(即HTML头部引用if IE)Hack,实际项目中CSS Hack大部分是针对IE浏览器不同版本之间的表现差异而引入的。

    1. 属性前缀法(即类内部Hack):例如 IE6能识别下划线""和星号" * ",IE7能识别星号" * ",但不能识别下划线"",IE6~IE10都认识"\9",但firefox前述三个都不能认识。

      background:black; /* for all browsers */
      _background:red; /* for ie6*/
      *background:green; /* for ie6~7 */
      background:blue\9; /* for ie6~10 */
      
    • 选择器前缀法(即选择器Hack):例如 IE6能识别html .class{},IE7能识别+html .class{}或者*:first-child+html .class{}。

      *html .class{}/* for IE6 */
      *+html .class{}/* for IE7 */
      *:first-child+html .class{}/* for IE7 */
      
    • IE条件注释法(即HTML条件注释Hack):针对所有IE(注:IE10+已经不再支持条件注释): ,针对IE6及以下版本: 。这类Hack不仅对CSS生效,对写在判断语句里面的所有代码都会生效。

    只在IE下生效
     <!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="ie.css"> 
    <![endif]--> 
    只在IE6下生效
     <!--[if IE 6]> 
    <link rel="stylesheet"type="text/css"href="ie6.css">
     <![endif]--> 
    只在IE6以上版本生效
     <!--[if gte IE 6]> 
    这段文字只在IE6以上(包括)版本IE浏览器显示
     <![endif]--> 
    非IE浏览器生效 
    <!--[if !IE]> 这段文字只在非IE浏览器显示 
    <![endif]-->```
    ----
    
    3.列举几种 浏览器兼容问题.
    
    * ` display:inline-block;/*IE8以下不支持*/`
    方法:添加`display:inline`尽可能正常展示页面功能
    * `opacity:0.4;/*IE8部分支持,IE8以下不支持*/`
    方法:添加`filter:alpha(opacity=50);`设置
    
    [【CSS】最全的CSS浏览器兼容问题](https://www.douban.com/group/topic/4629864/)
    
    ----
    
    4.针对兼容、多浏览器覆盖有什么看法?**渐进增强**和**优雅降级**是什么意思?
    
    * 分析需求,对于上级或客户需求兼容的低版本浏览器需全部兼容;
    * 对于低版本只要大局显示不影响,功能能实现,可以不刻意追求美观上样式的一致;
    * 分析浏览器占用率,一般低于一定占用率的浏览器可以选择不兼容;
    
    ①. **渐进增强:**
       * 一开始只构建站点的最少特性,然后不断针对各浏览器追加功能;
        * 从被所有浏览器支持的基本功能开始,逐步地添加那些只有新式浏览器才支持的功能。渐进增强是值得所有开发者采用的做法。渐进增强方案并不假定所有用户都支持javascript,而总是提供一种候补方法,确保用户可以访问(主要的)内容;
        * 使用渐进增强时,无需为了一个已成型的网站在旧式浏览器下正常工作而做逆向工程。首先,只需要为所有的设备和浏览器准备好清晰且语义化的HTML以及完善的内容,然后再以无侵入(unobtrusive)的方式向页面增加无害于基础浏览器的额外样式和功能。当浏览器升级时,它们会自动地呈现出来并发挥作用;
    
    ②. **优雅降级:**
    
       *  一开始就构建站点的完整功能,然后针对浏览器测试和修复;
        * 使用优雅降级方案,Web站点在所有新式浏览器中都能正常工作,如果用户使用的是老式浏览器,则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题,绝大多数Web设计师和开发者都通过专门的样式表或针对不同版本的IE的hack实践过优雅降级了;
        * 使用优雅降级技术时,你必须首先完整的实现了网站,其中包括所有的功能和效果。然后再为那些无法支持所有功能的浏览器增加候选方案,使之在旧式浏览器上以某种形式降级体验却不至于完全失效;
    
    ----
    
    5.`reset.css`和normalize.css分别是做什么的?为什么推荐使用` nomalize.css`?
    
    **Reset.css: **统一各个版本浏览器默认Html标签样式,直接重置所有原浏览器默认样式,再添加统一的标准默认样式;
    **normalize.css:**统一各个版本浏览器默认Html标签样式,只重置统一浏览器默认样式中有差异的部分样式;
    
    推荐使用Normalize的好处:
    * Normalize.css 保护了有价值的默认值;
    * Normalize.css 修复了浏览器的bug
    * Normalize.css 不会让你的调试工具变的杂乱;
    * Normalize.css 是模块化的;
    * Normalize.css 拥有详细的文档。
    
    [Normalize.Css介绍和使用,Normalize与CSS Reset的区别](http://www.yxxme.com/1034.html)
    
    ----
    
    6.IE盒模型和标准盒模型有什么区别? 怎样使 IE678使用标准盒模型?`box-sizing:border-box`有什么作用?
    
    ![IE盒子](https://img.haomeiwen.com/i1043191/edad806a8791b5e9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    ![标准盒模型](https://img.haomeiwen.com/i1043191/28f38945d9983944.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    
    ***使用IE6、7、8使用标准盒模型:***
    * 添加声明`<!DOCTYPE html>
    `
    
    ***box-sizing:border-box作用:***
               
     * 为元素设定的宽度和高度决定了元素的边框盒。即使盒子模型设定为IE盒模型,设定宽高包含内边距和边框和内容宽度;
    
    ----
                     本文版权归作者饥人谷_Josh和饥人谷所有,转载请注明来源
    
    ----

    相关文章

      网友评论

          本文标题:浏览器兼容

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