bootstrap如何兼容ie6

1. Bootstrap简介

Bootstrap是Twitter公司的开源前端框架，其目的是构建优雅、稳定、高效并且具有响应式布局的Web界面。

2. IE6存在的问题

IE6几乎可以被认为是Web开发者的噩梦。由于其对CSS和JavaScript标准的支持非常弱，所以开发者不得不使用各种hack的方法来兼容IE6，这大大增加了开发时间和难度。

具体来说，IE6的主要问题有：

2.1 CSS缺陷

IE6的CSS引擎中存在很多缺陷，最常见的问题包括：

不能应用未知的CSS属性；

无法显示PNG图片透明度；

不能支持min-width属性。

/* IE6下无法使用未知的CSS属性 */
div {
  background-color: #000000;
  border-radius: 5px; /* 在IE6下不生效 */
}

由于IE6不能应用未知的CSS属性，这导致许多CSS3的属性无法在IE6中生效。

2.2 JavaScript缺陷

IE6的JavaScript引擎相当古老，很多现代的JavaScript语法和API都不被支持，而且存在内存泄漏的问题。

// IE6下的JavaScript语法
var a = new Array();
a[0] = "hello";
a[1] = "world";
alert(a[0]); // 输出"hello"

由于IE6的JavaScript引擎问题，导致在IE6中使用现代的JavaScript库和框架非常困难。

3. Bootstrap如何兼容IE6

Bootstrap是一个响应式的前端框架，要想在IE6中得到完美的兼容，需要做很多工作。下面列出了一些常见的方法：

3.1 使用条件注释

利用IE6独有的条件注释语法，可以对IE6进行特殊的CSS和JavaScript处理。

<!--[if IE 6]>
  
  [xss_clean][xss_clean]

条件注释只在IE浏览器中生效，在其他浏览器中会被当做注释处理。

3.2 利用Hack技巧

在CSS中，Hack指一些不符合CSS标准的语法，但可以在某些浏览器中生效的技巧。以下是一些常用的Hack示例：

使用_*属性来针对IE6设置样式：

/* 针对IE6设置宽度 */
div {
  width: 100px; /* 在IE6中不生效 */
  _width: 80px; /* 使用Hack生效 */
}

使用+号选择器来针对IE6选择元素：

/* 针对IE6设置样式 */
div + p {
  margin-top: 10px; /* 在IE6中生效 */
}

使用Hack技巧会降低代码的可维护性，不建议滥用。

3.3 舍弃部分特性

在IE6中，很多CSS3特性、HTML5标签以及JavaScript API不被支持。在开发过程中，可以考虑在IE6中舍弃这些特性，以提高开发效率。例如：

使用background-image代替PNG图片的透明度；

使用div元素代替HTML5标签；

不使用XMLHttpRequest API，使用JSONP或iframe代替AJAX。

4. 总结

由于IE6的众多缺陷，在兼容IE6的过程中需要做很多额外的工作。Bootstrap在处理IE6兼容性上做得非常好，但是开发者在使用Bootstrap时也需要注意一些细节，比如引入IE6专用的CSS和JavaScript文件、不滥用Hack技巧、尽量舍弃一些不兼容的特性等。