1

我有一个正在使用 Sinatra 框架的网站，我已经将它上传到 Heroku。在 Firefox 上，我可以看到页面及其所有内容，但在 Chrome 上，所有文本、边框等的颜色都是白色的。为什么会这样，我该如何解决？请注意，我还将 Zurb 基础用于 HTML 框架，将 Sinatra 用于后端。

下面是我的 CSS 页面。

/* LAYOUT */
/*========*/
.the-page {
  -webkit-box-shadow: 4px 2px   rgba(0,0,0,.1),  -4px 0 2px  rgba(0,0,0,.1);
  -moz-box-shadow: 4px 0 2px  rgba(0,0,0,.1),  -4px 0 2px  rgba(0,0,0,.1);
  box-shadow: 4px 0 2px  rgba(0,0,0,.1),  -4px 0 2px  rgba(0,0,0,.1);
}

/* MISC */
/*======*/

.center {text-align: center;}

.brown {color: #653000;}

.green {color: #003218;}

a{color: #653000;}

a:hover {color: #003218;}

.size20 { font-size: 20px;}


/* Prevent MOZ border outline */
:focus {outline:none;}
::-moz-focus-inner {border:0;}

/* FOOTER */
/* ====== */


html, body {
  height: 100%;
  color: #653000;
}
.body-wrapper {
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -65px;
}
.footer, .push {
  height: 65px;
}

.footer {
  color: black;

}
4

1 回答 1

2

我在这里使用 Chrome 24 进行了测试，并查看了开发人员工具中应用的 CSS 规则。通过从标签中删除row类<html>，我能够在 Chrome 中看到您的网站。

以下规则似乎至少是您的一些麻烦的根源。

.row:before,.row:after{content:" ";display:table}

Chrome 根本不喜欢display:table应用于<html>标签的规则。

于 2013-01-28T18:34:33.533 回答