bootstrap兼容IE6的css资源-CSDN文库

共177个文件

less：82个

js：35个

html：31个

需积分: 9 82 浏览量 2014-10-29 19:21:48 上传评论收藏 1.37MB ZIP 举报

Bootstrap是一款广泛使用的前端框架，它提供了丰富的组件和样式，极大地简化了网页开发。然而，Bootstrap默认并不支持较老的浏览器，尤其是Internet Explorer (IE) 的早期版本，如IE6、IE7。标题“bootstrap兼容IE6的css”表明我们要解决的是使Bootstrap在这些老版本的IE浏览器中正常工作的技术问题。在进行Bootstrap与旧版IE兼容性开发时，主要涉及以下几个关键知识点： 1. **CSS Hack**: 由于不同浏览器对CSS的解析方式存在差异，为了确保在IE6和IE7中正确显示，需要使用特定的CSS Hack。例如，`_width` 仅在IE6下生效，`*zoom` 可用于触发IE的hasLayout特性，`<!--[if lt IE 9]>` 这样的条件注释可以为IE6到IE8提供特定的样式。 2. **HTML头部设置**: 描述中提到的“在html或其他的文件要加入兼容IE8,9的meta头”，这通常是指添加`<meta http-equiv="X-UA-Compatible" content="IE=edge">`，这将强制IE使用最高可用的标准模式渲染页面，避免使用怪异模式。 3. ** respond.js **: Bootstrap使用了媒体查询（Media Queries）来实现响应式设计，但IE6-8不支持。这时需要引入第三方库respond.js，它可以模拟媒体查询，使Bootstrap的响应式功能在旧版IE中生效。 4. **jQuery** 和 **Modernizr**: Bootstrap依赖jQuery来实现一些交互效果，但IE6需要一个特别的jQuery版本才能运行。同时，Modernizr可以帮助检测浏览器特性，为不支持某些功能的浏览器提供polyfill或备用方案。 5. **Bootstrap的兼容性补丁**: 有些Bootstrap组件可能需要额外的CSS或JavaScript来在旧版IE中工作，例如，下拉菜单（dropdowns）、模态框（modals）和轮播（carousel）等。开发者需要查找并应用针对这些组件的IE兼容性补丁。 6. **字体图标（Font Awesome）**：Bootstrap经常与Font Awesome一起使用，提供矢量图形图标。但旧版IE可能不支持SVG或WOFF格式的图标，需要确保提供EOT和PNG备份格式。 7. **JavaScript兼容性**：Bootstrap的JavaScript插件在旧版IE中可能存在问题，需要检查并修复。例如，`Array.prototype.forEach` 和 `addEventListener` 等现代JavaScript特性在IE8及以下版本中不存在，需要使用类似`jQuery.each`和`attachEvent`的替代方法。文件名“ddouble-bsie-fe3a04a”可能是某种特定的Bootstrap兼容IE的解决方案或者补丁包，可能包含了经过修改的CSS文件、respond.js脚本或者其他必要的资源。在实际项目中，开发者需要根据这个文件中的内容，结合以上知识点，对Bootstrap进行适当的调整，确保在IE6这样的古老浏览器中也能提供良好的用户体验。同时，需要注意的是，尽管可以努力实现兼容，但旧版IE的性能和安全性问题可能仍然存在，因此在可能的情况下，建议用户升级到更现代的浏览器。

资源推荐

资源详情

资源评论

收起资源包目录

bootstrap兼容IE6的css （177个子文件）

bootstrap.css 117KB

bootstrap-ie6.css 113KB

bootstrap-ie6.min.css 94KB

css-tests.css 5KB

qunit.css 4KB

ie.css 1KB

css-tests.html 36KB

test.html 19KB

p-6.html 15KB

test-other.html 11KB

test-buttons.html 8KB

test-form.html 8KB

test-navs.html 8KB

p-2.html 7KB

buttons.html 6KB

p-1.html 6KB

test-media.html 5KB

navbar.html 5KB

navbar-static-top.html 5KB

p-3.html 5KB

navbar-fixed-top.html 5KB

forms.html 4KB

test-tooltip.html 4KB

p-5.html 4KB

test-icons.html 4KB

p-4.html 4KB

test-carousel.html 2KB

forms-responsive.html 2KB

test-grid.html 2KB

index.html 2KB

slide-03.jpg 134KB

slide-02.jpg 134KB

bootstrap-slide-01.jpg 122KB

slide-01.jpg 81KB

bootstrap-slide-02.jpg 79KB

bootstrap-slide-03.jpg 48KB

jquery-1.7.2.min.js 93KB

jquery.js 91KB

bootstrap.js 55KB

qunit.js 37KB

bootstrap.min.js 25KB

bootstrap-ie.js 14KB

bootstrap-typeahead.js 8KB

bootstrap-tooltip.js 8KB

bootstrap-modal.js 6KB

bootstrap-typeahead.js 6KB

bootstrap-tooltip.js 6KB

bootstrap-dropdown.js 6KB

bootstrap-carousel.js 5KB

bootstrap-collapse.js 4KB

bootstrap-scrollspy.js 4KB

bootstrap-popover.js 4KB

bootstrap-carousel.js 4KB

bootstrap-dropdown.js 4KB

bootstrap-modal.js 4KB

bootstrap-button.js 3KB

bootstrap-tab.js 3KB

bootstrap-affix.js 3KB

bootstrap-popover.js 3KB

bootstrap-collapse.js 3KB

bootstrap-button.js 3KB

bootstrap-tab.js 3KB

bootstrap-alert.js 2KB

phantom.js 2KB

bootstrap-alert.js 2KB

bootstrap-transition.js 2KB

bootstrap-scrollspy.js 972B

bootstrap-phantom.js 714B

bootstrap-affix.js 590B

bootstrap-transition.js 374B

server.js 331B

.jshintrc 232B

package.json 673B

component.json 175B

mixins.less 24KB

mixins.less 21KB

forms.less 16KB

forms.less 15KB

navbar.less 14KB

navs.less 13KB

navbar.less 11KB

sprites.less 11KB

sprites.less 10KB

variables.less 9KB

buttons.less 8KB

button-groups.less 7KB

navs.less 7KB

dropdowns.less 7KB

button-groups.less 6KB

tables.less 6KB

共 177 条

## Welcome, This is bsie project Home. ### Introduce bsie is a patch library for Bootstrap IE6 support, bootstrap is a good web UI library from [twitter.com](http://twitter.github.com/bootstrap) At present, bsie support the most common feature of bootstrap on IE6, but not all ... Following table is currently supported component & feature: ``` Component Feature ----------------------------------------------------------- grid fixed, fluid navbar top, fixed nav list, tabs, pills dropdown dropdown (two level) buttons button, group color, size, dropdown-button, (disable state is not dynamic) form default, horizontal, inline, all controls, validation state tables hover breadcrumbs all pagination all labels all badges all code all modal most tooltip all popover all alert all typeahead all progressbar most media all wells all hero unit all icons all ``` ### File summary `bootstrap/css/bootstrap.css :` This is original bootstrap css. `bootstrap/css/bootstrap.min.css :` This is compressed original bootstrap css. `bootstrap/css/bootstrap-ie6.css :` This is bsie main css. `bootstrap/css/bootstrap-ie6.min.css :` This is compressed bsie main css. `bootstrap/css/ie.css :` This is bsie additional css patch, its most content can not be writen in .less file, it must follow bootstrap-ie6.css in `<head>` block. `js/bootstrap-ie.js :` This javascript file patch some problem which can not be done by pure CSS approach. `bootstrap/img/glyphicons-halflings.png-8.png :` This image file is transparent icons for IE6, it's a 8 bit png image, not very perfect, but I think it can be accepted. `bootstrap/less-ie6 :` There are all patched .less files, you can compile bootstrap-ie6.less with lessc to get your patch css file -- bootstrap-ie6.css ### Demo **In bsie root directory, these file is demo:** `test-XXX.html`, for example test-buttons.html test-form.html `p-1.html`...`p-N.html`, these file is a copy of bootstrap example pages ### Manual **Step 1, In `<head>` block, add following stylesheet:** ```  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css">  <link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css"> <![endif]--> ``` **Step 2, In end of the document, add following javascript:** ```  <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>  <script type="text/javascript" src="js/bootstrap-ie.js"></script> <![endif]--> ``` **Step 3, Optional accoding to your situation:** IE6 **Notice:** : call $.bootstrapIE6(el) for every new html snippet (for ajax html content) ``` /** * make elements in container el to be compatible with IE6 */ if ($.isFunction($.bootstrapIE6)) $.bootstrapIE6(el); ``` IE6 currently not support nested tabs control, because IE6 don't support child css selector ### IE6-7 hack **IE6 hack** ``` _zoom:1; ``` **IE6-7 hack** ``` *zoom:1; ``` ### IE6 bug fix tip **hasLayout (clear float):** ``` .container { zoom:1; } ``` **other css property which will trigger hasLayout:** ``` position: absolute float: left | right display: inline-block width: except 'auto' height: except 'auto' zoom: except 'normal' overflow: hidden | scroll | auto overflow-x/-y: hidden | scroll | auto position: fixed min-width: any value max-width: except 'none' min-height: any value max-height: except 'none' writing-mode: tb-rl /* only for MS */ ``` **following css property will clear hasLayout:** ``` width: auto; height: auto; max-width: none; /* IE7 */ max-height: none; /* IE7 */ position: static; float: none; overflow: visible; zoom: normal; writing-mode: lr-t; ``` **In one selector, following css will not set hasLayout=false:** ``` .element { display:inline-block; display:inline; } ``` **inline-block:** ``` `.container { zoom:1; display:inline; } ``` **transparent color:** ``` .element { border-color:pink/* rarely used color */; filter:chroma(color:pink); } * notice: the filter will cause disappeared of absolute element which in relative container ``` **body background color:** ``` body { /* Faild: Sometime, it will not render whole page by gray color */ background-color: gray; } * html { /* Success! */ background-color: gray; } ``` IE6-7 ul.dropdown-menu must add this style: _*width:explicit-width_; ``` /* for example */ *width:180px; ``` ### Support & Contact If you have some patch for these library, Please send to: ddouble.cn@gmail.com Thanks.

评论收藏

内容反馈