1

我遇到了这个非常奇怪的问题，Safari 网络浏览器显示的网站与 Firefox 有点不同。

我正在尝试将一些大型 Font Awesome 图标设置为 Twitter-Bootstrap span4。

容器在 Safari 上看起来像这样（正是我想要的样子）：

和 Firefox 一样：

HTML在这里：

<div class="container">
  <div class="row-fluid"> 
    <div class="span4 center front">
      <i class="icon-thumbs-up"></i>
      <div class="showcase">
      <h1>Heading</h1>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">Read more &raquo;</a></p>
      </div>
    </div>
    <div class="span4 center front">
      <i class="icon-thumbs-up"></i>
      <div class="showcase">
      <h1>Heading</h1>
      <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
      <p><a class="btn" href="#">Read more &raquo;</a></p>
      </div>
   </div>
    <div class="span4 center front">
      <i class="icon-thumbs-up"></i>
      <div class="showcase">
      <h1>Heading</h1>
      <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.</p>
      <p><a class="btn" href="#">Read more &raquo;</a></p>
      </div>
    </div>

在这里为类和 Font Awesome 自定义 CSS：

.container .row-fluid .span4 i {
  font-size: 150px;
  color: #777777;
}

.center {
  text-align: center;
}

.front {
  margin-top: 40px;
}

.showcase {
  margin-top: 125px;
}

编辑：

正如约翰已经建议的那样，我设法删除了 .showcase 栏，但是大字体真棒图标仍然没有完全对齐。我制作了另一个 jsfiddle http://jsfiddle.net/crz5e/2/，在那里我将.front类 margin-top 更改为 70px。

margin-top: 70px;添加到.front类中的 Safari 中看起来像这样

像这样在具有相同 CSS 的 Firefox 上。

4

1 回答 1

3

我猜你的浏览器中有一些缓存的 CSS。你设置了margin-top一个.showcase：

.showcase {
  margin-top: 125px;
}

删除它将解决边距问题。

JSFIDDLE

对于引导程序 3：

.span*.col-md-*在 Bootstrap 3 中被替换为。

请参阅迁移说明。

因此，将您的替换span4为col-md-4可以解决问题。

于 2013-10-12T16:58:38.817 回答