Bootstrap的目标是在最新的桌面和移动浏览器上有最佳的表现,也就是说,在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同,但是功能是完整的。 bootstrap3支持的浏览器: - Chrome (Mac、Windows、iOS和Android)
- Safari (只支持Mac和iOS版,Windows版已经基本死掉了)
- Firefox (Mac、Windows)
- Internet Explorer
- Opera (Mac、Windows)
Internet Explorer 8 和 9的很多CSS3属性和HTML5元素,例如圆角矩形和投影,不支持。 Internet Explorer 6 几乎不支持,nav, pagination 等在 ie6上表现都特别差。
<!--[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> 以上所有文件都可以在https://github.com/wqc200/dang-php-framework里找到,欢迎下载使用。
|