我的 CSS 和 HTML 有什么问题？ （使用 Twitter-Bootstrap 和 Font Awesome）

Question

我遇到了一个非常奇怪的问题，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;
}

---

编辑：

按照 John 的建议，我设法删除了 .showcase 栏，但大字体真棒图标仍然没有完全对齐。我制作了另一个 jsfiddle http://jsfiddle.net/crz5e/2/，我将 .front 类 margin-top 更改为 70px。

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

在 Firefox 上使用相同的 CSS。

Answer 1

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

.showcase {
  margin-top: 125px;
}

删除它将解决边距问题。

JSFIDDLE

---

对于 Bootstrap 3：

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

请参阅migration instructions。

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