bootstrap兼容IE各版本的浏览器问题

最新推荐文章于 2024-08-23 08:29:09 发布
最新推荐文章于 2024-08-23 08:29:09 发布
阅读量1.2w 收藏 6
点赞数 1
分类专栏： Bootstrap学习心得 文章标签： 前端开发 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;

  background-color: #428bca;

  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;

  background-color: #ffffff;

  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>

嵐烨
关注
专栏目录
bootstrap3 兼容IE8浏览器！
09-02
通过上述步骤，我们可以使Bootstrap 3在IE8浏览器上达到基本的兼容性。尽管这可能无法实现所有组件的完美表现，但至少可以确保网站的核心功能正常运行。需要注意的是，对于更早的版本如IE6和IE7，可能需要额外的处理...
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
热门推荐
编程之家
11-26 22万+
让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法，IE6 IE7 IE8 IE9 IE10 IE11，chrome,firefox,safari,opera，360浏览器（极速模式）、搜狗浏览器等浏览器测试通过
Bootstrap IE6兼容方案
那片田，那片天~~
02-17 1211
Bootstrap 是最近非常火的一个CSS框架，集成了很多的jquery插件，可以大大简化前台的布局，兼容手机、平板、电脑，可是不支持IE6的浏览器，中国IE6的用户还有很多呀~ 在网上有人做了一个插件，基本上算是完美支持IE6+，在项目里面实验了一下，总体来说支持的不错： Bootstrap 中国站点：http://www.bootcss.c
Bootstrap IE7兼容版使用手册
最新发布
gitblog_00539的博客
08-23 368
Bootstrap IE7兼容版使用手册 bootstrap-ie7Bootstrap 3 CSS for IE7项目地址:https://gitcode.com/gh_mirrors/bo/bootstrap-ie7 一、项目目录结构及介绍 Bootstrap IE7是一个专门为解决Bootstrap在Internet Explorer 7中兼容性问题的开源项目。下面是其基本的目录结构以及主...
Bootstrap浏览器兼容性
我的web前端学习
01-16 2万+
说到浏览器兼容性，就不得不提国内的浏览器占有率现状，这也使得国内的前端工程师总是需要针对各式各样的浏览器做CSS Hack，倘若你想要通过使用Bootstrap来避免这些额外的编码，那你就错了。 自从推出了Bootstrap3以后，整个框架对于低级浏览器的兼容性更是不忍直视，所以如果你的项目牵涉到IE8、IE7，甚至是IE6，那么就可以好好考虑是否还要执着于Bootstrap3了（当然，
！！！！bootstrap3兼容ie6配置
weixin_33775582的博客
08-31 148
！！！！bootstrap3兼容ie6配置 Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。 bootstrap3支持的浏览器： Chrome (Mac、Windows、iOS和Android) Safari (只支持Mac和...
bootstrap布局常用，兼容ie(6还有点问题)
responsecool的专栏
04-30 1527
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> bootstrap布局常用，兼容ie
Bootstrap 3浏览器兼容性问题及解决方案
08-30
在本文中，我们将深入探讨Bootstrap 3的浏览器兼容性问题，并提供有效的解决方案。Bootstrap 3是一个流行的前端开发框架，主要用于创建响应式布局和移动优先的Web项目。由于其基于HTML、CSS和JavaScript，开发者可以...
bootstrap IE8 兼容性处理
08-31
然而，Bootstrap默认并不完全兼容IE8浏览器，这是一个在一些老旧环境中仍然需要支持的浏览器版本。为了确保Bootstrap能在IE8中正常工作，需要进行特定的兼容性处理。 首先，针对IE8的兼容性问题，主要是在于该...
IE各版本浏览器测试软件 IETester（前端必备）
06-06
- **多版本支持**：IETester支持从IE5到IE9的所有主要版本，涵盖了大部分仍需兼容的老式浏览器。 - **独立环境**：每个版本的IE在IETester中都运行在独立的环境中，不会相互干扰，确保了测试的准确性。 - **禁用缓存...
bootstrap3支持ie系列
weixin_34309435的博客
01-07 174
原文：http://79px.com/html-css/263 关于Bootstrap3对于ie8的兼容源泉星期四, 11/20/2014 - 16:25其实，之前一直以为Bootstrap3很难实现对ie9一下的版本兼容。但前两天看了一个同行的网站，用的Bootstrap3做的，结果我用ie8测的时候，网站基本上是正常的。这不得不让我怀疑之前自己的看法的。于是就抽时间...
bootstrap兼容IE6的css
10-29
兼容IE，用boostrap做web项目的。可以用这个试试，在html或其他的文件要加入兼容IE8,9的meta头
解决bootstrap 3 IE8兼容性问题
06-11
解决bootstrap 3 IE8兼容性问题 研究了下getbootstrap.com网站在IE8下是正常的，他们采取的解决办法是：
Bootstrap 兼容 IE
尽力而为
03-02 5158
着重强调一下我是个没有任何设计水平的后端程序员，只是这次项目开发没办法才兼了前端。在完全没有美工帮助的情况下，用基础的前端知识，快速/敏捷的做出一个还看得过去的应用，并且从头到尾不用考虑如何做出复杂效果，只需要按着教程搭就行了
让bootstrap兼容ie6 ie7 ie8 ie9 ie10 ie11的解决方法
技术改变生活
07-07 9425
前两天遇到要bootstrap兼容ie各个版本的问题，但是各种百度，各种博客，最后算是解决了，但是迷迷糊糊的，现在来总结一下，如有雷同纯属总结。 首先看看代码的模样： html> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> meta name="viewport" content="wid
bootstrap兼容IE6、7、8版本（IE9以下版本）
u012491775的专栏
04-08 2015
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5新增的标签，引入下面代码文件即可 同理为使IE6、7、8版本浏览器兼容css3样式，引入下面代码：
关于bootstrap栅格系统不兼容IE6,7,8
baidu_41205301的博客
12-03 3232
关于bootstrap的兼容性和轮播图不能手动滑动
bootstrap模板为使IE6、7、8版本（IE9以下版本）浏览器兼容html5和css3
猿子
04-08 1631
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><!DOCTYPE html> <html lang="en">
解决Bootstrap在IE8/IE9栅格兼容性难题
然而，由于Bootstrap主要使用HTML、CSS和JavaScript的最新技术，因此它在早期版本的Internet Explorer浏览器（如IE8和IE9）中存在兼容性问题。这主要是因为这些旧版浏览器不支持某些CSS3和HTML5的特性，同时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值