Question

我在safari 5.1.7中遇到过这个错误。我有一行有12列，问题是在safari中查看时，容器会在右边添加额外的空间。

以下是代码：

CSS

.wrapper {

    background:blue;
  }

  .wrapper .container {

    background:red;

  }

  .wrapper .container .row .col {

    height:30px;
    background:grey;
    padding: 0;
  }

HTML

<div class="wrapper">
  <div class="container">
    <div class="row">
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
      <div class='col-xs-1 col'></div>
    </div>
  </div>
</div>

除了safari之外，代码在所有浏览器上都能正常工作。

此处位于chrome

此处位于safari

Answer 1

这并不奇怪，因为您使用的版本太旧了。 Bootstrap确实在文档中记录了这个问题：

Safari百分比舍入

适用于OS X和OS的v7.1之前的Safari版本的渲染引擎   适用于iOS v8.0的Safari在小数位数方面存在一些问题   在我们的.col - * - 1网格类中使用。所以如果你有12个单独的网格   列，您注意到与其他行相比它们变短了   列。除了升级Safari / iOS，你还有一些选择   解决方法：


将.pull-right添加到最后一个网格列以获得硬右对齐

手动调整百分比以获得Safari的完美舍入（比第一个选项更难）

我不愿意支持不再使用的浏览器。

safari

1 个答案: