面试常见技术问题

------------           JQ           -----------1、jq常见选择器？

，号选择器，分组选择器。空格，祖父选择器。>大于号，父子选择器。+号选择器，紧接下一个兄弟选择器。~号，元素之后所有的siblings元素。

：first，：last，：not，：first-child，:last-child,:animated.：checked

2. jQuery插件实现方式，分别介绍？

jQuery.fn.extend 封装直接在$下面的方法，就是根下面，

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。

$.extend用来在jQuery命名空间上增加新函数。用一个或多个其他对象来扩展一个对象，返回被扩展的对象

批量的方法用fn，静态的用$.extend（），不建议用扩展到根下面。

3.bind和live的区别?

live方法其实是bind方法的变种，其基本功能就同bind方法的功能是一样的，都是为一个元素绑定某个事件，但是bind方法只能给当前存在的元素绑定事件，对于事后采用JS等方式新生成的元素无效，而live方法则正好弥补了bind方法的这个缺陷，它可以对后 生成的元素也可以绑定相应的事件.

1. js和jq如何转换？

 jQuery 对象是通过 jQuery 包装DOM 对象后产生的对象。jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如： $("#img").attr("src","test.jpg"); 这里的 $("#img")就是 jQuery 对象。

 DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。例如：document.getElementById("img").src = http://www.mamicode.com/“test.jpg"；这里的document.getElementById("img") 就是DOM 对象。

  $("#img").attr("src","test.jpg"); 和 document.getElementById("img").src = "http://www.mamicode.com/test.jpg"; 是等价的，是正确的，但是 $("#img").src = "http://www.mamicode.com/test.jpg" ；或者 document.getElementById("img").attr("src","test.jpg"); 都是错误的。

1. DOM 对象转成 jQuery 对象

对于已经是一个 DOM 对象，只需要用 $() 把DOM对象包装起来，就可以获得一个 jQuery 对象了，$(DOM 对象)

如：　var v = document.getElementById("v");        //DOM对象

           var $v = $(v);        //jQuery 对象

转换后，就可以任意使用 jQuery 的方法。

2. jQuery 对象转成 DOM 对象

两种转换方式讲一个 jQuery 对象转换成 DOM 对象： [index] 和 .get(index)；

(1) jQuery 对象是一个数据对象，可以通过 [index] 的方法，来得到相应的 DOM 对象。

   如： var $v = $("#v");          //jQuery 对象

            var v = $v[0];               //DOM 对象

            alert(v.checked);                  //检测这个checkbox是否被选中

   (2) jQuery 本身提供，通过.get(index) 方法得到相应的 DOM 对象

     如：var   $v = $("#v");           //jQuery 对象

             var v = $v.get(0);            //DOM对象 ( $v.get()[0] 也可以 )

             alert(v.checked);             //检测这个 checkbox 是否被选中

通过以上方法，可以任意的相互转换 jQuery 对象和 DOM 对象，需要再强调的是： DOM 对象才能使用DOM 中的方法，jQuery 对象是不可以使用ＤＯＭ中的方法。   

----------JS    ----------

1.给出一个数组如何去掉重复的项？

实现一个把数组里面的重复元素去除的方法：

主要的是Array的prototype的方法。

var arr=[1,3,5,3,6,9,1,2,2]

var arr=[‘a‘,‘b‘,‘a‘,‘c‘,‘c‘,‘ab‘,‘bc‘]

function removeRepeat(arr){

var i,tmpArr=[];

for(i in arr){

if(tmpArr.join(‘,‘).indexOf(arr[i])==-1){

tmpArr.push(arr[i]);

 }

}

return tmpArr;

}

var r=removeRepeat(arr);

console.log(r);

二．方法：

Array.prototype.unique=function(){

var i,tmpArr=[];

for(i in this){

if(typeof this[i]!=‘function‘){

if(tmpArr.join(‘,‘).indexOf(this[i])==-1){

 tmpArr.push(this[i]);

}

}

}

return tmpArr;

 }

var arr=[‘a‘,‘b‘,‘a‘,‘c‘,‘c‘,‘ab‘,‘bc‘];

var r=arr.unique();

console.log(r);

2.js如何实现面向对象？

var name = ‘Chen Hao‘;
var email = ‘haoel(@)hotmail.com‘;
var website = ‘http://coolshell.cn‘;

var chenhao = {
　　    name : ‘Chen Hao‘,
　　    email : ‘haoel(@)hotmail.com‘,
　　    website : ‘http://coolshell.cn‘
};

//以成员的方式
chenhao.name;
chenhao.email;
chenhao.website;
//以hash map的方式
chenhao["name"];
chenhao["email"];
chenhao["website"];

//我们可以看到， 其用function来做class。
var Person = function(name, email, website){
    this.name = name;
    this.email = email;
    this.website = website;
    this.sayHello = function(){
        var hello = "Hello, I‘m "+ this.name  + "， \n" +
                    "my email is: " + this.email + "， \n" +
                    "my website is: " + this.website;
        alert(hello);
    };
};
var chenhao = new Person("Chen Hao", "haoel@hotmail.com",
                                     "http://coolshell.cn");
chenhao.sayHello();

1. Javascript的数据和成员封装很简单。没有类完全是对象操作。纯动态！
2. Javascript function中的this指针很关键，如果没有的话，那就是局部变量或局部函数。去找最紧跟的上一个function。
3. Javascript对象成员函数可以在使用时临时声明，并把一个全局函数直接赋过去就好了。
4. Javascript的成员函数可以在实例上进行修改，也就是说不同实例相同函数名的行为不一定一样。

3.js如何实现继承?

定义一个Dog对象，并增加一个name属性，该属性可以在新建对象时通过参数传入

            function Dog( name ){

                this.name = name;

            }

// 通过原型方式扩展Dog对象

     Dog.prototype = {

// 重新覆盖构造函数让其指向Dog

constructor:Dog,

Wow:function(){

console.group();

console.info("I am: "+this.name );

console.info("WangWang....");

console.groupEnd();

},

yelp:function(){

this.Wow();

}

            };

            function MadDog(name){

Dog.apply( this, [name]);

            }

            MadDog.prototype=new Dog();

// 重新覆盖构造函数，让其指向MadDog

            MadDog.prototype.constructor=MadDog;

            MadDog.prototype.yelp=function()

            {

                self=this;

                setInterval(function(){

self.Wow();

},5000);

            }

            var xiaoXian=new Dog("xiaoXian");

            xiaoXian.yelp();

            var xiaoMang=new MadDog("xiaoMang");

            xiaoMang.yelp();

console.log( xiaoXian.constructor == xiaoMang.constructor );

4.如果扩展js中原生的String对象?string的方法？

String.prototype.name= function(){}

Slice从字符串的第一个参数提取第二个参数，也可以截取数组。返回的结果类型：string/object

Substring 从字符串的第一个参数提取第二个参数，返回的结果类型，string。

Indexof 返回短字符串在长字符串出现的位置。

Lastindexof 返回最后一个短字符串出现的位置。

Replace 字符串的替换方法，

Split 字符串分割方法，能转换为数组，数组转换字符串，用jion（）方法。

5.document.ready()和window.onload的区别?

Document.ready()是jQuery中准备出发的事件，当加载到当前元素就执行了，

Window.onload是整个页面加载之后才执行。

1. 闭包是什么？

闭包是有权访问另一个函数作用域中的变量的函数。

闭包是个函数，而它“记住了周围发生了什么”。表现为由“一个函数”体中定义了“另一个函数”

“闭包”是一个表达式（一般是函数），它具有自由变量以及绑定这些变量的环境（该环境“封闭了”这个表达式）。

1. 闭包有权访问函数内部的所有变量。

2.当函数返回一个闭包时，这个函数的作用域将会一直在内存中保存到闭包不存在为止。

function f() {

    var rs = [];

    for (var i=0; i <10; i++) {

        rs[i] = function() {

            return i;

        };

    }

    return rs;

}

var fn = f();

for (var i = 0; i < fn.length; i++) {

    console.log(‘函数fn[‘ + i + ‘]()返回值:‘ + fn[i]());

}

---------- WEB-------------

1.什么是响应式网页?

 通过CSS3 Media Query实现响应式Web设计

响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。

具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说，页面应该有能力去自动响应用户的设备环境。这样，我们就可以不必为不断到来的新设备做专门的版本设计和开发了。

2. 介绍jQuery easyUI？jQuery easyUI组件使用?

jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。

布局layout，上南，下北，左西右东，中间内容，左边的组件是：tree，手风琴，中间的有tab，tab里有datagrid数据表格，还有数据表格的toolbar工具栏。对话框dialog；

3. PHP中include和include_once的区别？

include_once()语句的语法和include()语句类似，主要区别也是避免多次包含一个文件而引起函数或变量的重复定义。include_once() 语句在脚本执行期间包含并运行指定文件。include_once语句把include的功能扩展了。在程序执行期间，将指定的文件包含进来，如果从文件引用进来的程序先前已经包含过的时候，include_once()就不会把它再包含进来。也就是仅仅可以引用同一个文件一次！

4.最熟悉的web的前端框架？

Jq，yui，extjs，prototype，dojo，mootools

5.雅虎的14条优化规则？

1. 尽可能的减少 HTTP 的请求数 content

2. 使用 CDN（Content Delivery Network） server

3. 添加 Expires 头(或者 Cache-control ) server

4. Gzip 组件 server

5. 将 CSS 样式放在页面的上方 css

6. 将脚本移动到底部（包括内联的） javascript

7. 避免使用 CSS 中的 Expressions css

8. 将 JavaScript 和 CSS 独立成外部文件 javascript css

9. 减少 DNS 查询 content

10. 压缩 JavaScript 和 CSS (包括内联的) javascript css

11. 避免重定向 server

12. 移除重复的脚本 javascript

13. 配置实体标签（ETags） css

14. 使 AJAX 缓存

6、Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。

在IE 6出现时，在标准模式中使用的是正确的盒模型，在混杂模式中使用的则是老式的专有盒模型。为了维持对IE 5和更低版本的向后兼容性，Opera 7和更高版本也在混杂模式中使用有缺点的IE盒模型。

7. 前端页面有哪三层构成，分别是什么？作用是什么？

网页的结构层（structural layer）由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

网页的表示层（presentation layer） 由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

• 使用 (X)HTML 去搭建文档的结构。
• 使用 CSS 去设置文档的呈现效果。
• 使用 DOM 脚本去实现文档的行为

8. 如何居中一个浮动元素?

方法一：让最外面的层相对定位，left等于50%，然后内部嵌套层也使用相对定位且left设为-50%，这样的效果就是内层相对整行为水平居中；

方法二：使用display: table;

方法三：直接使用table布局（使用太多table容易让结构看起来比较混乱，其实页面中使用少量的table，只要不要嵌套使用，还是可以实现使用少量CSS，达到最好的效果的），这种方法这里就不举例演示了。

9. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

1、css文件，以及js文件尽量分别都放在一个文件里，因为客户端请求服务器的次数就会减少。
   2、背景图尽量采用聚合技术，就是放在一个图片里，用background-position来定位；
   3、css文件里尽量都精简一些，比如说#sidebarcontent{}啥的，我们直接可以用#s-c{}因为这样整个文件的容量就会减少 ，同样的原理，在线也可以压缩js文件。容量变小些嘛 ；

10. 什么是DOM，什么是BOM？以及它们的用法？

BOM 即浏览器对象模型，浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”， 由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

Window对象其实是BOM中所有的对象都源自window对象，有location对象，history对象，方法 有.Resize（）alert( ) .confirm( ).prompt( ).open().close().setInterval().setTimeout()。

• window.open() - 打开新窗口
• window.close() - 关闭当前窗口
• window.moveTo() - 移动当前窗口
• window.resizeTo() - 调整当前窗口的尺寸

DOM的文档对象模型，最顶级的对象是document。可以js通过操作DOM，就是一个接口，可以访问html的标准方法。要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

11. HTTP协议的状态消息都有哪些?(如200、302对应的描述)国内外的JS牛人都知道哪些?

协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则，超文本传输协议(HTTP)是一种通信协议，它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端的浏览器，

• “100″ : Continue（继续） 初始的请求已经接受，客户应当继续发送请求的其余部分。（HTTP 1.1新）
• “101″ : Switching Protocols（切换协议） 请求者已要求服务器切换协议，服务器已确认并准备进行切换。（HTTP 1.1新）
• “200″ : OK（成功） 一切正常，对GET和POST请求的应答文档跟在后面。
• “201″ : Created（已创建）服务器已经创建了文档，Location头给出了它的URL。
• “202″ : Accepted（已接受）服务器已接受了请求，但尚未对其进行处理。
• “203″ : Non-Authoritative Information（非授权信息） 文档已经正常地返回，但一些应答头可能不正确，可能来自另一来源 。（HTTP 1.1新）。
• “204″ : No Content（无内容）未返回任何内容，浏览器应该继续显示原来的文档。
• “205″ : Reset Content（重置内容）没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容（HTTP 1.1新）。
• “206″ : Partial Content（部分内容）服务器成功处理了部分 GET 请求。（HTTP 1.1新）
• “300″ : Multiple Choices（多种选择）客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
• “301″ : Moved Permanently（永久移动）请求的网页已被永久移动到新位置。服务器返回此响应（作为对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
• “302″ : Found（临时移动）类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。注意，在HTTP1.0中对应的状态信息是“Moved Temporatily”，出现该状态代码时，浏览器能够自动访问新的URL，因此它是一个很有用的状态代码。注意这个状态代码有时候可以和301替换使用。例如，如果浏览器错误地请求http://host/~user（缺少了后面的斜杠），有的服务器返回301，有的则返回302。严格地说，我们只能假定只有当原来的请求是GET时浏览器才会自动重定向。请参见307。
• “303″ : See Other（查看其他位置）类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取（HTTP 1.1新）。
• “304″ : Not Modified（未修改）自从上次请求后，请求的网页未被修改过。原来缓冲的文档还可以继续使用，不会返回网页内容。
• “305″ : Use Proxy（使用代理）只能使用代理访问请求的网页。如果服务器返回此响应，那么，服务器还会指明请求者应当使用的代理。（HTTP 1.1新）
• “307″ : Temporary Redirect（临时重定向）和 302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码：当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。（HTTP 1.1新）
• “400″ : Bad Request（错误请求）请求出现语法错误。
• “401″ : Unauthorized（未授权）客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
• “403″ : Forbidden（已禁止） 资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。
• “404″ : Not Found（未找到）无法找到指定位置的资源。
• “405″ : Method Not Allowed（方法禁用）请求方法（GET、POST、HEAD、DELETE、PUT、TRACE等）禁用。（HTTP 1.1新）
• “406″ : Not Acceptable（不接受）指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容（HTTP 1.1新）。
• “407″ : Proxy Authentication Required（需要代理授权）类似于401，表示客户必须先经过代理服务器的授权。（HTTP 1.1新）
• “408″ : Request Time-out（请求超时）服务器等候请求时超时。（HTTP 1.1新）
• “409″ : Conflict（冲突）通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。（HTTP 1.1新）
• “410″ : Gone（已删除）如果请求的资源已被永久删除，那么，服务器会返回此响应。该代码与 404（未找到）代码类似，但在资源以前有但现在已经不复存在的情况下，有时会替代 404 代码出现。如果资源已被永久删除，那么，您应当使用 301 代码指定该资源的新位置。（HTTP 1.1新）
• “411″ : Length Required（需要有效长度）不会接受包含无效内容长度标头字段的请求。（HTTP 1.1新）
• “412″ : Precondition Failed（未满足前提条件）服务器未满足请求者在请求中设置的其中一个前提条件。（HTTP 1.1新）
• “413″ : Request Entity Too Large（请求实体过大）请求实体过大，已超出服务器的处理能力。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头。（HTTP 1.1新）
• “414″ : Request-URI Too Large（请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法进行处理。
• “415″ : Unsupported Media Type（不支持的媒体类型）请求的格式不受请求页面的支持。
• “416″ : Requested range not satisfiable（请求范围不符合要求）服务器不能满足客户在请求中指定的Range头。（HTTP 1.1新）
• “417″ : Expectation Failed（未满足期望值）服务器未满足”期望”请求标头字段的要求。
• “500″ : Internal Server Error（服务器内部错误）服务器遇到错误，无法完成请求。
• “501″ : Not Implemented（尚未实施） 服务器不具备完成请求的功能。例如，当服务器无法识别请求方法时，服务器可能会返回此代码。
• “502″ : Bad Gateway（错误网关）服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答。
• “503″ : Service Unavailable（服务不可用）服务器由于维护或者负载过重未能应答。通常，这只是一种暂时的状态。
• “504″ : Gateway Time-out（网关超时） 由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答。（HTTP 1.1新）
• “505″ : HTTP Version not supported（HTTP 版本不受支持）不支持请求中所使用的 HTTP 协议版本。

国内的比较牛的人：淘宝网UED官方博客。灵玉，大成小胖，承玉，拔赤

常去的技术论坛：博客园，

11.JSON和JSONP的区别？JSONP的原理？

JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别，但其实他们根本不是一回事儿：JSON是一种数据交换格式，而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。

1、一个众所周知的问题，Ajax直接请求普通文件存在跨域无权限访问的问题，甭管你是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不准；

　　2、不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响（不仅如此，我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>）；

　　3、于是可以判断，当前阶段如果想通过纯web端（ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算）跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理；

　　4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据，更妙的是JSON还被js原生支持，所以在客户端几乎可以随心所欲的处理这种格式的数据；

　　5、这样子解决方案就呼之欲出了，web客户端通过与调用脚本一模一样的方式，来调用跨域服务器上动态生成的js格式文件（一般以JSON为后缀），显而易见，服务器之所以要动态生成JSON文件，目的就在于把客户端需要的数据装入进去。

　　6、客户端在对JSON文件调用成功之后，也就获得了自己所需的数据，剩下的就是按照自己需求进行处理和展现了，这种获取远程数据的方式看起来非常像AJAX，但其实并不一样。

7、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

12.如何让ie6,7,8，兼容html5的标签？

我一直使用公司里的提供的jqside插件，里面就是把html5的标签放到字符串，用字符串的split的方法变为数组，用while的方法，变量减减，用dom的createElement方法进行再ie678里创建标签。

if( $.isIE678 ){

var html5 = "abbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(‘,‘),

i = html5.length;

while(i--) document.createElement(html5[i]);

}

13.WEB前端的开发工具？

Yslow，雅虎开发工具，判断网页里哪个运行的慢，基于网页查找。

Firebug：火狐开发工具，也用过一段时间，挺好用的，只是不习惯。

Chrome：谷歌开发工具，比较适用于移动端和网页的调试。

14.web前端的管理工具？

Svn，git

15.如何解析json？

用ajax去请求json数据，在回调函数里，把数据传过到函数里。通过用一个for循环，用innerHTML和jQuery的方法html（）的方法，渲染到页面里。

-------CSS--------

1．常见ie6的浏览器兼容bug（3-5个）？

1.文字本身的大小不兼容。

同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff 下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定 line-height 。确保所有文字都有默认的 line-height 值。

2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie6下是会被内容撑大，高度限定失效,ie7,8,9都不会撑大。所以不要轻易给容器定义height。解决方案用：height！important；min-height：100px；max-height： 200px

3.横向上的撑破容器问题，。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折行。故，内容可能撑破的浮动容器需要定义width。

4.最被痛恨的，double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决方案，给浮动容器定义display:inline。

5. 吞吃现象。还是ie6，上下两个div，上面的div设置背景，却发现下面没有设置背景的div 也有了背景，这就是吞吃现象。对应上面的背景吞吃现象，还有滚动下边框缺失的现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生的。

6.注释也能产生bug~~~“多出来的一只猪。”这是前人总结这个bug使用的文案，ie6的这个bug 下，大家会在页面看到猪字出现两遍，重复的内容量因注释的多少而变。解决方案：用“<!–[if !IE]> picRotate start <![endif]–>”方法写注释。

7.img 下的留白，如下代码：

<div>
<img src=http://www.mamicode.com/“1.jpg” />
</div>

把div的border打开，你发现图片底部不是紧贴着容器底部的，是img后面的空白字符造成，要消除必须这样写

<div>
<img src=http://www.mamicode.com/”1.jpg” />