游客您好
第三方账号登陆
amecaton
Lv.9 管理员
1号会员，2411活跃度，2017/05/26 加入学习
  • 1387发帖
  • 419主题
  • 10关注
  • 4粉丝
这个人很懒，什么也没有留下。
最新推荐更多
返回列表 发新帖

[Bootstrap] 关于如何兼容ie6的bootstrap3配置

[复制链接]
amecaton实名认证 QQ认证 发表于 2020-5-19 19:55:27 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
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之下加入如下代码：
  1. <!--[if lte IE 6]>
  2. <link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1">
  3. <![endif]-->
  4. <!--[if lte IE 7]>
  5. <link rel="stylesheet" type="text/css" href="/css/ie.css">
  6. <![endif]-->
复制代码
禁用响应式布局：
  1. <link href="/css/non-responsive.css" rel="stylesheet" media="screen">
复制代码

html里的css代码：
  1. <style type="text/css">
  2. body {
  3.     padding-top: 60px;
  4.     padding-bottom: 40px;
  5. }
  6. /* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */
  7. .container,
  8. .navbar-static-top .container,
  9. .navbar-fixed-top .container,
  10. .navbar-fixed-bottom .container {
  11.     width:1140px;
  12. }
  13. </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;
  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整个头部文件如下：

  1. <!DOCTYPE HTML>
  2. <html>
  3. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <link href="/css/bootstrap.min.css" rel="stylesheet" media="screen">
  6. <!-- Bootstrap theme -->
  7. <link href="/css/bootstrap-theme.min.css" rel="stylesheet">
  8. <!--[if lte IE 6]>
  9. <link rel="stylesheet" type="text/css" href="/css/bootstrap-ie6.css?1">
  10. <![endif]-->
  11. <!--[if lte IE 7]>
  12. <link rel="stylesheet" type="text/css" href="/css/ie.css">
  13. <![endif]-->
  14. <link href="/css/non-responsive.css" rel="stylesheet" media="screen">
  15. <link href="/css/showLoading.css" rel="stylesheet" media="screen">
  16. <script type="text/javascript" src="/js/jquery-1.10.2.min.js"></script>
  17. <script type="text/javascript" src="/js/bootstrap.min.js"></script>
  18. <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  19. <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  20. <!--[if lt IE 9]>
  21.   <script src="/js/html5shiv.js"></script>
  22.   <script src="/js/respond.min.js"></script>
  23. <![endif]-->
  24. <style type="text/css">
  25. body {
  26.     padding-top: 60px;
  27.     padding-bottom: 40px;
  28. }
  29. /* 禁用响应式布局：重新设置container的宽度。如果没有后面三行的代码，在IE6环境下navbar-top会显示为940px宽度 */
  30. .container,
  31. .navbar-static-top .container,
  32. .navbar-fixed-top .container,
  33. .navbar-fixed-bottom .container {
  34.     width:1140px;
  35. }
  36. </style>
复制代码




• 本内容来源互联网，如涉及版权问题请及时联系站长
• 为防止代码解析，除代码框内<>为正常，其余请重新替换<>尖括号

关于 如何 兼容 配置

相关帖子
回复 百度 360 搜狗 搜搜 有道 必应 即刻

使用道具 举报

发布主题
返回列表
发布资源 快速回复 站点服务大厅 搜索 官方群

H5手机版

微信公众号

友情链接： 室内设计课程 室内设计问答 设计师求职 中国设计网 室内效果图 3d模型下载 云渲染 3d贴图 木门 装饰设计 红木家具 logo设计 房屋设计图 3dmax教程网 地板 朱峰社区 手绘网 装修设计效果图 ps学习网 图片素材 装饰公司 maya 成都房产 中瓷网 3Dmax模型 瓷砖 DOOOOR设计网 创客教育 装修公司加盟 模型网 广州房产网 大作免费图片库 设计圈 中国设计在线 上海装修公司 成都装修
浙公网安备:33020602000252号 | 网站备案号:浙ICP备14002936号-1 ©2016-2020 本站所有资源均来源于网络，如有侵权请及时联系站长。|网站地图