Apache Tomcat/7.0.42 - Error report HTTP Status 401 - Bad credentialstype Status reportmessage Bad credentialsdescription This request requires HTTP authentication.Apache Tomcat/7.0.42Bsie（鄙视IE） -- Bootstrap IE6 兼容库
Bsie（鄙视IE）
Bootstrap IE6 兼容库
欢迎，这是bsie项目主页。
bsie弥补了Bootstrap对IE6的不兼容。Bootstrap是
推出的非常棒的web UI工具库。
目前，bsie能在IE6上支持大部分bootstrap的特性，可惜，还有一些实在无法支持...
下面的这个表格就是当前已经被支持的bootstrap的组件和特性：
-----------------------------------------------------------
fixed, fluid
top, fixed
list, tabs, pills
dropdown (two level)
button, group color, size, dropdown-button,
(disable state is not dynamic)
default, horizontal, inline, all controls,
validation state
pagination
progressbar
文件用途介绍
bootstrap/css/bootstrap.css :
这是bootstrap原始的css文件。
bootstrap/css/bootstrap.min.css :
这是bootstrap原始的压缩后的css文件。
bootstrap/css/bootstrap-ie6.css :
这是bsie的主要的css文件。
bootstrap/css/bootstrap-ie6.min.css :
这是bsie压缩后的css文件。
bootstrap/css/ie.css :
这是bsie额外添加的css补丁，这个文件中的大部分内容无法写入到 .less 文件中，并且必须紧跟在 bootstrap-ie6.css 之后在&head& 中引入。
js/bootstrap-ie.js :
这个javascript补丁文件用于解决一些纯CSS无法完成工作。
bootstrap/img/glyphicons-halflings.png-8.png :
这个图片文件是针对IE6的透明格式图标，是png 8bit格式的，显示效果虽然并不是太好，但是也还可以接受。
bootstrap/less-ie6 :
这个目录下是所有打过补丁的 .less 文件，你可以用lessc命令重新编译出 bootstrap-ie6.css文件
在bsie目录下有以下几个案例：
test-XXX.html, 例如 test-buttons.html
test-form.html
p-1.html...p-N.html, 这几个文件都是直接从bootstrap案例中拷贝过来的
第1步， 在 &head& 中添加以下css文件：
&!-- Bootstrap css file v2.2.1 --&
&link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"&
&!--[if lte IE 6]&
&!-- bsie css 补丁文件 --&
&link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-ie6.css"&
&!-- bsie 额外的 css 补丁文件 --&
&link rel="stylesheet" type="text/css" href="bootstrap/css/ie.css"&
&![endif]--&
第2步，在html文档结尾处加入以下的javascript文件：
&!-- jQuery 1.7.2 or higher --&
&script type="text/javascript" src="js/jquery-1.7.2.min.js"&&/script&
&!-- Optional, bootstrap javascript library --&
&script type="text/javascript" src="bootstrap/js/bootstrap.js"&&/script&
&!--[if lte IE 6]&
&!-- bsie js 补丁只在IE6中才执行 --&
&script type="text/javascript" src="js/bootstrap-ie.js"&&/script&
&![endif]--&
第3步，根据你的情况，这一步是可选的：
注意： : 对每一个新加载的html片段都要调用 $.bootstrapIE6(el) 函数，其实主要就是指的通过ajax获取到的html内容
* 让el容器中的的所有元素都能兼容IE6
$.bootstrapIE6(el)
目前在IE6下还不能支持tab控件的嵌套，主要是因为IE6不支持css的子选择器
IE6-7 hack
IE6-7 hack
IE6 bug fix tip
hasLayout (clear float):
.container
其它能够触发haslayout的css属性：
left | right
inline-block
except 'auto'
except 'auto'
except 'normal'
hidden | scroll | auto
overflow-x/-y: hidden | scroll | auto
min-width:
max-width:
except 'none'
min-height: any value
max-height:
except 'none'
writing-mode: tb-rl
/* only for MS */
下面列出的css属性能够清除hasLayout：
max-width:
max-height:
writing-mode: lr-t;
In one selector, following css will not set hasLayout=false:
.element {
display:inline-
inline-block:
`.container
border-color:pink/* rarely used color */;
filter:chroma(color:pink);
* 注意：在relative定位的容器中包含的absolute元素将会由于filter的缘故而消失
body元素的背景色：
body { /* Faild: Sometime, it will not render whole page by gray color
background-color:
* html { /* Success! */
background-color:
ul.dropdown-menu 必须增加以下样式： *width:explicit-width;
/* for example */
*width:180
If you have some patch for these library, Please send to:
Bsie is maintained by
This page was generated by . Tactile theme by .
Bsie由翻译整理magicsa 的BLOG
用户名：magicsa
文章数：252
评论数：38
访问量：440481
注册日期：
阅读量：5863
阅读量：12276
阅读量：369452
阅读量：1064133
51CTO推荐博文
原文： 关于Bootstrap3对于ie8的兼容&源泉&&星期四, 11/20/2014 - 16:25其实，之前一直以为Bootstrap3很难实现对ie9一下的版本兼容。但前两天看了一个同行的网站，用的Bootstrap3做的，结果我用ie8测的时候，网站基本上是正常的。这不得不让我怀疑之前自己的看法的。于是就抽时间研究了下Bootstrap在ie8这方便的兼容配置。分析首先我用ie11打开测试网站。然后审查元素之后将页面渲染模式切换到ie8下，然后发现网格宽度什么的都不见了。所以所有的网格都默认用了100%的宽度。也就出现了布局混乱的情况。然后我有查看了Bootstrap的CSS源代码。发现这些定义宽度的CSS都是写在@media这种媒体查询中的。问题所在@media是CSS3才有的。那么这里就可以肯定ie8是不支持@media媒体查询的。解决方案然后从github上发现了/scottjehl/Respond这个项目。可以让媒体查询在ie6-8下也能被识别。然后简短的看了此项目的介绍。得出Bootstrap3兼容ie8解决方案即在页面头部加入如下代码：&!--[if<&IE&9]&
&&&script&src="js/respond.min.js"&&/script&
&![endif]--&当然，需要确保你的js路径是对的。下面提供一个适合国内使用的cdn方案：&!--[if<&IE&9]&
&&&script&src="/respond.js/1.4.2/respond.min.js"&&/script&
&![endif]--&注意事项值得注意的是，Respond.js必须是在服务器-浏览器的环境下才会有效的。也就是说，如果你用直接打开HTML文件的方式来查看是没有效果的。
了这篇文章
类别：┆阅读(0)┆评论(0)