如何调试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 ]>

这段文字只在IE6浏览器显示

<![endif]–>

只在IE6以上版本生效

<!–[if gte IE ]>

这段文字只在IE6以上(包括)版本IE浏览器显示

<![endif]–>

只在IE8上不生效

<!–[if ! IE ]>

这段文字在非IE8浏览器显示

<![endif]–>

非IE浏览器生效

<!–[if !IE]>

这段文字只在非IE浏览器显示

<![endif]–>
  • 属性前缀
      _和-只对ie6有效；

       *对ie6,7有效；

      \9对ie11以下所有ie有效；

      \0对ie8,9,10有效；

      \9\0只对ie9,10有效；

      \0\9只对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;

        width:100px;

        height:100px;

        padding:50px;

        margin:50px;

    }

    .box3,.box2{

        display: inline-block;

    }

    .box4{

        max-width: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-width:300px</div>

</body>

</html>

IE7下的情况：

IE8下的情况：

IE5下的情况

找不到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-width:只支持IE7以上的

level-13的更多相关文章

  1. [译]Stairway to Integration Services Level 13 - SSIS 变量回顾

    介绍 在前一篇中我们组合了已经学过的事件冒泡 event bubbling, 日志记录 logging, 和父子模型 Parent-Child pattern 建立了自定义的SSIS包日志记录. 本文 ...

  2. 《VIM-Adventures攻略》 LEVEL 1-3

    此文已转至http://cn.abnerchou.me/2014/03/04/e40e2146/ 上期有人提到此游戏烂尾.其实没有啦,作者是位"贪财"的主,不付费不给玩剩下的章节. ...

  3. Natas Wargame Level 13 Writeup（文件上传漏洞，篡改file signature，Exif）

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqMAAADDCAYAAAC29BgbAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  4. 百度地图-省市县联动加载地图 分类： Demo JavaScript 2015-04-26 13:08 530人阅读 评论(0) 收藏

    在平常项目中,我们会遇到这样的业务场景: 客户希望把自己的门店绘制在百度地图上,通过省.市.区的选择,然后加载不同区域下的店铺位置. 先看看效果图吧: 实现思路: 第一步:整理行政区域表: 要实现通过 ...

  5. 版本和API Level对照表

    版本和API Level对照表 Code name Version API level (no code name) 1.0 API level 1 (no code name) 1.1 API le ...

  6. Android 系统名字、版本、API level的对应关系

    从官网上找到的,具体地址是: http://source.android.com/source/build-numbers.html Code name Version API level Lolli ...

  7. 最新Android的SDK版本与API Level的对应关系

    Android   7.1.1                                   API Level  25   Android   7.0                     ...

  8. 【XSS-labs】Level 11-15

    Level 11 和level 10 差不多的页面,传参后查看页面源代码:依旧是第3个可以正常传参. 尝试level 10 的payload 发现 " 被实体化 可以打开控制台将第三个inp ...

  9. Android SDK 与API版本对应关系

    Android SDK版本号 与 API Level 对应关系如下表: Code name Version API level   (no code name) 1.0 API level 1   ( ...

  10. JavaScript高级编程 (1) - javscript是什么

    <重温javascript>这是一系列 javascript 的学习笔记,部分内容摘自书本或者网络,我这里只是基于自己的理解进行了梳理整理. 一个完整的 javscript 实现是由以下3 ...

随机推荐

  1. 【BZOJ】3301: [USACO2011 Feb] Cow Line（康托展开）

    http://www.lydsy.com/JudgeOnline/problem.php?id=3301 其实这一题很早就a过了,但是那时候看题解写完也是似懂非懂的.... 听zyf神犇说是康托展开, ...

  2. Java泛型解析(04)：约束和局限性

    Java泛型解析(04):约束和局限性           前两节.认识和学习了泛型的限定以及通配符.刚開始学习的人可能须要一些时间去体会到泛型程序设计的优点和力量,特别是想成为库程序猿的同学就须要下 ...

  3. java web 登录框

    我们会骂 12306 的网站界面挫,效果差,速度慢,回头看看自己写的代码,是不是也一样的狗血!在前端,很多看似简单的东西,内藏无数玄机.本文将以一个小小的登录框为入口,谈一谈如何完善自己的程序. 在很 ...

  4. vim 命令大全（写的非常全和好）http://blog.csdn.net/woshixiaosimao/article/details/54312738

    下文转自链接.由原作者陈皓译自<Learn ViM Progressively>,非常不错. ——————————正文开始—————————— 你想以最快的速度学习人类史上最好的文本编辑器 ...

  5. 【Python】IDLE清屏

    上网搜,没搜到可用的快捷键.但看到一个通过打印空内容来清屏的方法,smart ef clear(): for i in range(60): print

  6. Linux下android开发环境配置

    1.安装jdk 1．到sun官网下载jdk(附jdk6下载地址),根据自己的ubuntu版本选择合适的jdk版本.如你用的是ubuntu 32位系统则选择下载jdk-6u41-linux-i586.b ...

  7. 应用IBatisNet+Castle进行项目的开发

    最近在做一个项目,项目的需求不够明确,这是做项目的大忌,但是没有办法.项目的架构采用Dotnet平台使用C#进行开发,为了加快项目的开发进度,采用代码生成工具之MyGeneration 生成业务基本代 ...

  8. 7.15;linux命令

    麦克维瀑布 https://farm5.staticflickr.com/4269/34749113172_d6c1ba274a_k.jpg ----------------------------- ...

  9. 【BZOJ4145】[AMPPZ2014]The Prices 状压DP

    [BZOJ4145][AMPPZ2014]The Prices Description 你要购买m种物品各一件,一共有n家商店,你到第i家商店的路费为d[i],在第i家商店购买第j种物品的费用为c[i ...

  10. Windows（7）上那些好用的软件及优化技巧（原创）

    *本文为原创内容,转载请注明作者和出处:www.cnblogs.com/wang1024 软件篇 注:以下软件在百度直接搜索软件名均可找到官网,直接官网下载即可 大众的软件哪个好: 杀毒软件专题 基于 ...