zoukankan      html  css  js  c++  java
  • level-13

    如何调试IE浏览器

    1.打开IE浏览器,F12打开开发者模式。(针对IE7及以上)
    2.针对IE6浏览器。使用虚拟机或者用ietester
    

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

    由于不同厂商的浏览器,或者是同一厂商的浏览器的不同版本,如IE6和IE7,对CSS的解析认识不完全一样,因此会导致生成的页面效果不一样,得不到我们所需要的页面效果。 而`CSS hack`是利用浏览器漏洞来让不同浏览器显示效果一致,我们把针对不同的浏览器/不同版本写相应的`CSS code`的过程,叫做`CSS hack`;
    

    CSS hack的基本四种方法:

    • ie条件注释法
    只在IE下生效
    <!–[if IE]>
    这段文字只在IE浏览器显示
    <![endif]–>
    只在IE6下生效
    <!–[if IE 6]>
    这段文字只在IE6浏览器显示
    <![endif]–>
    只在IE6以上版本生效
    <!–[if gte IE 6]>
    这段文字只在IE6以上(包括)版本IE浏览器显示
    <![endif]–>
    只在IE8上不生效
    <!–[if ! IE 8]>
    这段文字在非IE8浏览器显示
    <![endif]–>
    非IE浏览器生效
    <!–[if !IE]>
    这段文字只在非IE浏览器显示
    <![endif]–>
    • 属性前缀
          _和-只对ie6有效;
           *对ie6,7有效; 
          9对ie11以下所有ie有效;
          0对ie8,9,10有效;
          90只对ie9,10有效;
          09只对ie8,9有效;
    
    • 选择器前缀法:
    * 前缀只对IE6有效;
    *+ 前缀只对IE7有效;
    

    列举几种 浏览器兼容问题

    1.ie6,7下块级元素float浮动后的双边距bug。
    2.ie6、7不支持display:inline-block;
    3.ie6中块级元素不支持:hover属性

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

    并不是覆盖越多的浏览器越好,要考虑付出和收益比。考虑的维度可以有

    • 浏览器使用用户的比例情况及(各个浏览器的市场占用率)
    • 项目关键人使用浏览器习惯
    • 客户使用浏览器习惯
    渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
    
    优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。
    
    区别:优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带。
    

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

    reset.css是统一将所有元素的默认样式格式化。比较暴力,不管你以前是什么样子,统统变成一个样子,元素的默认样式都会去掉。
    nomalize.css相当于改良派,提倡是保留有用的元素默认样式,需要什么元素变成什么样子的时候再对其进行调整。并对不同浏览器的兼容进行了优化,在可维护性和易用性上表现较好,因此推荐使用nomalize.css。
    

    操作:
    下的虚拟机装系统装错了。里面浏览器不是ie6的。
    就用的IE那个开发者模式 测试的。
    测试代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
        .box1{
            border:50px solid red;
            100px;
            height:100px;
            padding:50px;
            margin:50px;
        }
        .box3,.box2{
            display: inline-block;
        }
        .box4{
            max-300px;
            height:100px;
            background:red;
            margin:0px auto;
        }
        </style>
    </head>
    <body>
        <div class="box1">盒模型</div>
        <div class="box2">你好</div>
        <div class="box3">世界</div>
        <div class="box4">max-300px</div>
    
    </body>
    </html>

    IE7下的情况:
    0_1458042573605_upload-ef2bd46e-6db3-412c-95be-ce174fd90514
    IE8下的情况:
    0_1458042400706_upload-fb89e09e-fd60-4c61-9de7-aaf411c12b2e
    IE5下的情况
    0_1458042440409_upload-ec47931b-f878-435a-9f4d-4c9ddd9c8873
    找不到IE6的浏览器 测试了下IE5的 是感觉大不一样。。。。
    百度了一下
    是因为一般情况下IE6下面的和模型就是怪异模式?

    怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”,怪异模式主要表现在IE内核的浏览器。
    在标准模式下,一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
    在怪异模式下,一个块的总宽度= width + margin(左右)(即width已经包含了padding和border值)
    当不对doctype进行定义时,会触发怪异模式。
    另外,可以通过触发hasLayout,使IE6进入正常的解析模式当中,如设置css属性zoom:1
    

    另外inline-block不支持IE6、7
    max-只支持IE7以上的

  • 相关阅读:
    hdu1050 Moving Tables
    初读《数学之美》........................(2)
    初读《数学之美》........................(1)
    zju1058 Currency Exchange
    hdu 2391 Filthy Rich
    hdu1029 Ignatius and the Princess IV(统计)
    hdu1072 Nightmare (BFS)
    apache2.2 + tomcat 6 集群
    权限管理系统实现:
    设置页面那些ID对应的对象隐藏setDisplay
  • 原文地址:https://www.cnblogs.com/acorn/p/5281003.html
Copyright © 2011-2022 走看看