bootstrap 兼容哪些浏览器
Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。
bootstrap3支持的浏览器： Chrome (Mac、Windows、iOS和Android)
Safari (只支持Mac和iOS版，Windows版已经基本死掉了)
Firefox (Mac、Windows)
Internet Explorer
Opera (Mac、Windows)
Bootstrap在Chromium、Linux版Chrome、Linux版Firefox和Internet Explorer 7上的表现也是很不错的，只是官方并不提供支持。
Internet Explorer 8 和 9的很多CSS3属性和HTML5元素，例如圆角矩形和投影，不支持。
Internet Explorer 6 几乎不支持，nav, pagination 等在ie6上表现都特别差。
使用bootstrap2的bsie插件 http://www.bootcss.com/p/bsie/ ，提取插件里的 bootstrap-ie6.css 和ie.css，在页面的head里bootstrap.css之下加入如下代码：
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie.css">
<![endif]-->
禁用响应式布局： <link href="/css/non-responsive.css" rel="stylesheet" media="screen"> html里的css代码： <style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
/* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width:1140px;
}
</style> 打开 bootstrap-ie6.css文件，将文件里的pager替换为pagination，用于支持bootstrap3的分页组件。并在底部加入如下代码，代码作用请看注释： /* 栅栏系统，溢出的问题 */
.col-xs-1 {
width: 5.7%;
}
.col-xs-2 {
width: 13.96%;
}
.col-xs-3 {
width: 22.2%;
}
.col-xs-4 {
width: 30.5%;
}
.col-xs-5 {
width: 38.8%;
}
.col-xs-6 {
width: 47%;
}
.col-xs-7 {
width: 55.2%;
}
.col-xs-8 {
width: 63.5%;
}
.col-xs-9 {
width: 72%;
}
.col-xs-10 {
width: 80%;
}
.col-xs-11 {
width: 88.3%;
}
.col-xs-12 {
width: 100%;
} /* 修复ie6下分页组件css解析失败的问题 */
.pagination .active a,
.pagination .active span {
z-index: 2;
color: #ffffff;
cursor: default; border-color: #428bca;
} /* 修复ie6下input样式被重写的问题*/
.form-control{
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.428571429;
color: #555555;
vertical-align: middle; border: 1px solid #cccccc;
border-radius: 4px;
}
在html页body之上添加如下代码： <!--[if lte IE 6]>
<script type="text/javascript" src="/js/bootstrap-ie.js"></script>
<![endif]-->
<script type="text/javascript">
(function ($) {
$(document).ready(function() {
if ($.isFunction($.bootstrapIE6)) $.bootstrapIE6($(document));
});
})(jQuery);
</script> html整个头部文件如下： <!DOCTYPE HTML>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
<!-- Bootstrap theme -->
<link href="/css/bootstrap-theme.min.css" rel="stylesheet">
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1">
<![endif]-->
<!--[if lte IE 7]>
<link rel="stylesheet" type="text/css" href="/css/ie.css">
<![endif]-->
<link href="/css/non-responsive.css" rel="stylesheet" media="screen">
<link href="/css/showLoading.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
/* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */
.container,
.navbar-static-top .container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
width:1140px;
}
</style>
bootstrap 兼容哪些浏览器的更多相关文章
- 【转】让Bootstrap 3兼容IE8浏览器
FROM : http://www.ijophy.com/2014/05/bootstrap3-compatible-with-ie8.html 最近在研究Bootstrap(官方,Github)这个 ...
- 让Bootstrap 3兼容IE8浏览器
最近在研究Bootstrap(官方,Github)这个优秀的前端框架,Bootstrap最开始是Twitter团队内部的一个前端框架,所谓前端框架就是一个CSS/HTML框架,框架里面有下拉菜单.按钮 ...
- Bootstrap 3兼容IE8浏览器（转）
Bootstrap是一个响应式的布局,你可以在宽屏电脑.普通电脑,平板电脑,手机上都得到非常优秀的布局体验.这种响应式的布局正是通过CSS3的媒体查询(Media Query)功能实现的,根据不同的分 ...
- Bootstrap 3 兼容 IE8 浏览器
公司新上的项目,前端用的Bootstrap3的框架,但它已经放弃对IE9下的支持了.可IE8还是有着许多用户,不能不照顾到他们,IE7以下的,我只想说,现在什么年代了,要解放思想,与时俱进啊,就不能动 ...
- bootstrap3兼容ie8浏览器
bootstrap3 兼容IE8浏览器 2016-01-22 14:01 442人阅读 评论(0) 收藏 举报 分类: html5(18) 目录(?)[+] 近期在使用bootstrap这 ...
- CSS兼容各浏览器的hack
CSS兼容各浏览器的hack:建议:尽可能的手写代码,可以有效的提高学习效率和深度.浏览器的种类多,麻烦自然也多,主要是各种浏览器对某些属性的渲染效果并不相同,所以有时候需要专门针对特定浏览器或者特定 ...
- 【原】CSS实现背景透明，文字不透明，兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
- JS获取回车事件（兼容各浏览器）
一.用到onkeydown获取事件动作, 二.用到键盘对应代码keyCode, 三. var event=arguments.callee.caller.arguments[0]||window.ev ...
- CSS实现背景透明，文字不透明，兼容所有浏览器
11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~ 进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐 ...
随机推荐
- Linux内核(13) - 子系统的初始化之以PCI子系统为例
由Kconfig这张地图的分布来看,PCI这块儿的代码应该分布在两个地方,drivers/pci和arch/i386/pci,两岸三地都属于一个中国,不管是drivers/pci那儿的,还是arch/ ...
- VC获得window操作系统版本号, 获取操作系统位数
原文链接: http://www.greensoftcode.net/techntxt/2014315195331643021849 #include <Windows.h>include ...
- Python 字典 clear()方法
描述 Python 字典 clear() 方法用于删除字典内所有元素. 语法 clear() 方法语法: D.clear() 参数 无. 返回值 该方法没有任何返回值. 实例 以下实例展示了 clea ...
- ORACLE11g中毒恢复
很不幸的,win2003server疏于管理,中毒了,清理了病毒以后.oracle也瘫痪了.上次备份还在一周前,这一周的数据咋办? 首先的想法,是另找一台机器,装个一模一样的oracle.再把被删的文 ...
- C++第12周(春)项目2 - "双肩挑"教师
课程首页在:http://blog.csdn.net/sxhelijian/article/details/11890759,内有完整教学方案及资源链接 [项目2 - 教师兼干部类](第11章习题9) ...
- 创建C3P0数据源
[Author]: kwu 创建C3P0数据源,实际开发中直接用JDBC连接数据库是非常少的.一般使用数据源的形式,C3P0是开源的数据源,实际项目用得非常多: 1.添加maven的支持 <de ...
- SGMII 和 Serdes 的详细说明
Serdes : SERDES是英文SERializer(串行器)/DESerializer(解串器)的简称.它是一种时分多路复用(TDM).点对点的通信技术,即在发送端多路低速并行信号被转换成高速 ...
- 【Android】7.1 布局控件常用的公共属性
分类:C#.Android.VS2015: 创建日期:2016-02-10 一.简介 Android应用程序中的布局控件都是容器控件,用于控制子元素的排列和放置方式.Android提供的布局控件有: ...
- 逆向随笔 - switch 语句深入分析
switch case 语句在c语言里还是比較简单的.可是被编译出来之后,优化结果往往让人非常疑惑.全然看不懂,以下我们一次次的尝试,看看编译器究竟把switch语句变成什么样了. ① 先上个最简 ...
- Install haroopad on centos7
1.Install libs sudo yum install systemd-libs -y 2.Download haroopad goto haroopad1 download bin pack ...