Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。bootstrap3支持的浏览器： Chrome (Mac、Windows、iOS和Android)Safari (只支持Mac和iOS版，Windows版已经基本死掉了)Firefox (Mac、Windows)Internet ExplorerOpera (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>
时间： 2024-10-08 00:53:23