【www.bbyears.com--css3教程】
Internet Explorer 8 和 9
Internet Explorer 8 和 9 是被支持的，然而，你要知道，很多CSS3属性和HTML5元素 -- 例如，圆角矩形和投影 -- 是肯定不被支持的。另外，Internet Explorer 8 需要Respond.js配合才能实现对媒体查询（media query）的支持。
Internet Explorer 8 和 Respond.js
在开发环境和生产（线上）环境需要支持 Internet Explorer 8 时，请务必注意下面给出的警告。
Respond.js 和 跨域（cross-domain） CSS 的问题
如果 Respond.js 和 CSS 文件被放在不同的域名或子域名下面（例如，使用CDN）时需要一些额外的设置。请参考 Respond.js 文档 获取详细信息。
Respond.js 和 file://
由于浏览器的安全规则问题，Respond.js 不能通过 file:// 协议（打开本地HTML文件所用的协议）访问的页面上发挥正常的功能。如果需要测试IE8下面的响应式特性，必须用http服务器（例如apache、nginx）托管HTML页面才可以。请参考 Respond.js 文档 获取更多信息。
Respond.js 和@import
Respond.js 不支持通过 @import 引入的CSS文件。例如，Drupal 一般被配置为通过 @import 引入CSS文件，Respond.js对其将无法起到作用。 请参考Respond.js 文档获取更多信息。
Internet Explorer 8 与 box-sizing
IE8不能完全支持box-sizing: border-box;与min-width、max-width、min-height或max-height一同使用。由于此原因，从Bootstrap v3.0.1版本开始，我们不再为.container使用max-width。
IE兼容模式
Bootstrap不支持IE的兼容模式。为了让IE浏览器运行最新的渲染模式，建议将此 标签加入到你的页面中：
此标签被加入到所有文档页面和案例页面中，以确保在每个被支持的IE浏览器中保持最好的页面展现效果。
1.浏览器和设备的支持情况
Bootstrap 的目标是在最新的桌面和移动浏览器上有最佳的表现，也就是说，在较老旧的浏览器上可能会导致某些组件表现出的样式有些不同，但是功能是完整的。只要在遇到的时候针对性的做出调整，基本组件是没有问题的正常使用的。关键的问题在布局上。因为使用的响应式是html5+css3,IE9以下的几乎不支持。如图1所示WEB设计的图，可能是左边的，但手机ipad 等手持设备，尺寸不一样，网页要适应尺寸，根据不能同尺寸重新排列这就是html5响应式设计。
2.Internet Explorer 8 和 9
Internet Explorer 9 和8的兼容模式是被支持的，纯Internet Explorer 8 不被支持，然而，很多 CSS3 属性和 HTML5 元素 -- 例如，圆角矩形和投影 -- 是肯定不被支持的。另外， Internet Explorer 8 需要 Respond.js 配合才能实现对媒体查询（media query）的支持。
3.Internet Explorer 8 与 box-sizing 属性
当 box-sizing: border-box; 与 min-width、max-width、min-height 或 max-height 一同使用时，IE8 不能完全支持 box-sizing 属相。由于此原因，从 Bootstrap v3.0.1 版本开始，不再为 .container 赋予 max-width 属性。
box-sizing定义和用法 box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
4.bootstrap3布局框架
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。它包含了易于使用的预定义类，还有强大的mixin（Mixin编程是一种开发模式，是一种将多个类中的功能单元的进行组合的利用的方式，这听起来就像是有类的继承机制就可以实现，然而这与传统的类继承有所不同。通常mixin并不作为任何类的基类，也不关心与什么类一起使用，而是在运行时动态的同其他零散的类一起组合使用。） 用于生成更成更具语义的布局。 栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。下面就介绍一下 Bootstrap 栅格系统的工作原理：
-
“行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
通过“行（row）”在水平方向创建一组“列（column）”。
你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。
如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
Bootstrap 3提供的row 属性
.row {margin-left: -9px; margin-right: -9px; }
.row:before,.row:after { content: " "; display: table; } .row:after { clear: both; } .row:before,.row:after { content: " "; display: table; } .row:after { clear: both; }重写后row 属性
.row { margin-left: -15px; margin-right: -15px; width: 100%; *zoom: 1; }
.row:before,.row:after {display: table;line-height: 0;content: "";} .row:after { clear: both;} 关于row 属性这里做了请浮动的处理，同时也兼顾了IE7 的hack 利用了伪类的方式。 把12栅格全部重写成浮动，全面row 清楚浮动，在ie 8 环境中就会自然撑起成固定宽度流式布局